Question

我遇到了一些FLASH的z-index和一个重叠的DIV元素的问题。

我使用了这个jQuery / Javascript解决方案，它将“wmode = transparent”参数添加到每个（YouTube＆amp; 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 中的这个解决方案，因为我仍然有一些z-index闪烁（在呈现DOM期间），直到jQuery / Javascript解决方案纠正了这个问题（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';

...

非常感谢提前！

最佳迈克=）

PS：我的想法是提前通过PHP解决z-index问题（服务器端，而不是客户端）。

PPS：仅供参考 - 我从MySQL-DB中获取HTML-content / -tags的“content”字符串，我想修改这些字符串，而不是通过jQuery / Javascript修改DOM。

UPDATE /编辑：

来自“One Trick Pony”的正则表达式解决方案，为我工作。我编辑了第一个并添加了第二个“preg_replace”。第一个将“？wmode = transparent”添加到每个iframe-src的末尾，第二个替换“？”用“＆amp;”如果在网址中存在两次。

$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);

使用PHP将“wmode”参数添加到iframe的src

1 个答案: