php - 使用 PHP 将 "wmode"参数添加到 iframe 的 src

Question

我在处理 FLASH 和叠加的 DIV 元素的 z-index 时遇到了一些问题。

我使用了这个 jQuery/Javascript 解决方案，它将“wmode=transparent”参数添加到每个(YouTube 和 Vimeo)iframe 的“src”，以解决 z-index 问题(例如闪烁等)。

...

content.find('iframe').each(function() {

   var iframe_source = $(this).attr('src');
   var iframe_wmode = "wmode=transparent";

   if ( iframe_source.indexOf('?') != -1 )
   {
       iframe_source = iframe_source.split('?');
       $(this).attr('src',iframe_source[0]+'?'+iframe_wmode+'&'+iframe_source[1]);
   }
   else
   {
       $(this).attr('src',iframe_source+'?'+iframe_wmode);
   }

});

...

现在我需要在 PHP 中使用这个解决方案，因为在 jQuery/Javascript 解决方案解决这个问题之前我仍然有一些 z-index 闪烁(在 DOM 渲染期间)( on $(window).load(function(){} ... $(document).ready(function(){} 对我来说是不可能的)。

例如，我的 PHP 内容看起来像这样......

...

$content = '
foo bar foo bar
<iframe width="1280" height="720" src="http://www.youtube.com/embed/GASFa7rkLtM" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="100" height="100" src="http://www.youtube.com/embed/GASFa7rkLtM?rel=0" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/GASFa7rkLtM" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe src="http://player.vimeo.com/video/57959739?autoplay=1&amp;loop=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
foo bar foo bar';

...

...在一些 preg_match/regex-magic 之后应该看起来像这样 ;)

...

$content = '
foo bar foo bar
<iframe width="1280" height="720" src="http://www.youtube.com/embed/GASFa7rkLtM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="100" height="100" src="http://www.youtube.com/embed/GASFa7rkLtM?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/GASFa7rkLtM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe src="http://player.vimeo.com/video/57959739?autoplay=1&amp;loop=1&wmode=transparent" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
foo bar foo bar';

...

非常感谢!

最佳迈克 =)

附言:我的想法是提前通过 PHP 解决 z-index 问题(服务器端，而不是客户端)。

附:仅供引用 - 我从 MySQL-DB 中获取带有 HTML-content/-tags 的“content”字符串，我想修改这些字符串，而不是通过 jQuery/Javascript 修改 DOM。

---

更新/编辑:

建立在“One Trick Pony”中的正则表达式解决方案对我有用。我编辑了第一个并添加了第二个“preg_replace”。第一个将“?wmode=transparent”添加到每个 iframe-src 的末尾，第二个替换“？”如果 url 中存在两次，则使用“&”。

$content = preg_replace('#\<iframe(.*?)\ssrc\=\"(.*?)\"(.*?)\>#i',
                        '<iframe$1 src="$2?wmode=transparent"$3>', $content);

$content = preg_replace('#\<iframe(.*?)\ssrc\=\"(.*?)\?(.*?)\?(.*?)\"(.*?)\>#i',
                        '<iframe$1 src="$2?$3&$4"$5>', $content);

这不是一个漂亮的解决方案，但它非常适合我的目的。

有更好的建议吗？

Answer 1

使用 DomDocument :

$dom = new DomDocument();
$dom->loadHtml($content);

foreach($dom->getElementsByTagName('iframe') as $ifr){

  // use parse_url here, change query and rebuild it if you want to be 100% sure 
  $src = rtrim($ifr->getAttribute('src'), '&') . '&wmode=transparent';

  $ifr->setAttribute('src', $src);
}

$content = $dom->saveHtml();

---

使用贪婪匹配对正则表达式进行基本尝试:

$content = preg_replace('#\<iframe(.*?)\ssrc\=\"(.*?)\"(.*?)\>#i', 
                        '<iframe$1 src="$2&wmode=transparent"$3>',  $content);