JavaScriptでDOMな感じのプログラミング。z-indexを使ってレイヤーを前面に表示しようとすると、それを無視してFlashが最前面（一番上）に覆いかぶさってしまう。これをなんとかしたい。
静的なHTMLの場合、というか、自分で作ったHTMLならパラメータの指定でなんとかなるという。Lightboxを使った際の回避方法として以下が見つかる。
Flash コンテンツが z-index を無視して覆い被さってしまう件 :: drk7jp
Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用することで Flash コンテンツが z-index を無視して一番上に表示されてしまう不具合を解消することができます。
なるほど。
しかし、今回はこれでは解決できない。ブックマークレットで、どのページでもFlashを最前面にしないようにしたい。z-indexを使ってレイヤーを作るということで参考にしたのがこれ。とてもスタイリッシュなiPhone、iPod touchのブックマークレット。
はてなブックマーク用ブックマークレット for iPhone – sarusaruworld lab – Web Lab
上記はiPhone用なのでFlashは関係ないのだけど、参考になるコードがあったのでそれをFlashコンテンツにも応用。
自分が表示したい覆いかぶさるレイヤー（以下、自前レイヤー）を表示する際に、Flshaコンテンツをいったん消す。で、自前レイヤーを消す際に、Flashコンテンツの表示を元に戻すという手順になる。そのために2つの関数を作成。以下、コード。
//hide flash
function hideFlash(){
var objectTags = document.getElementsByTagName("embed");
for (var i=0; i<objectTags.length; i++){
var objectTag = objectTags[i];
objectTag.style.display = "none";
}
var objectTags = document.getElementsByTagName("object");
for (var i=0; i<objectTags.length; i++){
var objectTag = objectTags[i];
objectTag.style.display = "none";
}
}
//show flash
function showFlash(){
var objectTags = document.getElementsByTagName("embed");
for (var i=0; i<objectTags.length; i++){
var objectTag = objectTags[i];
objectTag.style.display = "block";
}
var objectTags = document.getElementsByTagName("object");
for (var i=0; i<objectTags.length; i++){
var objectTag = objectTags[i];
objectTag.style.display = "block";
}
}
これでうまくいった。問題点は解消。上記リンクの方々、ありがとうございます。とくにsarusaru worldさんのブックマークレットは機能もさることながら、デザインもかっこいい。自分が作りかけのやつもこれを元に全面やり直し中（というかパクり中）。デザインはあんなにかっこよくならない気配ですが、IEやFirefoxなど各種ブラウザで使えるよう鋭意作成中。
コメント