3

FLASH-のz-indexとオーバーレイするDIV-elementでいくつか問題が発生しました。

私はこのjQuery/Javascriptソリューションを使用しました。これは、すべての（YouTubeとVimeo）iframeの「src」に「wmode =transparent」パラメーターを追加して、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);
   }

});

...

jQuery / Javascriptソリューションがこの問題を修正するまで（$（window）.load（function（）{}） 、（DOMのレンダリング中に）z-index-flickeringがまだあるため、 PHPでこのソリューションが必要になります。 .. $（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を変更するのではなく、これらの文字列を変更したいと思います。

更新/編集：

「OneTrickPony」の正規表現ソリューションを構築することは私のために働きました。最初の「preg_replace」を編集して、2番目の「preg_replace」を追加しました。1つ目は各iframe-srcの末尾に「？wmode =transparent」を追加し、2つ目は「？」を置き換えます URLに2回存在する場合は、「＆」を付けます。

$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 に答える