3

我在使用 FLASH 的 z-index 和覆盖的 DIV 元素时遇到了一些问题。

我使用了这个 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中的这个解决方案，因为我仍然有一些 z-index-flickering（在渲染 DOM 期间），直到 jQuery/Javascript 解决方案纠正了这个问题（在 $(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 的“内容”字符串，我想修改这些字符串，而不是通过 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);

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

有更好的建议吗？

4

1 回答 1

2

使用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);
于 2013-01-30T01:48:28.170 回答