はじめに
webページを作成していると、body要素へポップアップ画面を追加したいことがよくあります。たとえば、
$("body").append("<div id='' >ポップアップ画面</div>");
というコードを実行すると、bodyの最後尾にポップアップ画面が複数追加されることがあります。二つ目以降は、副産物ではありません。むしろ、バグです。
何が現れたか
それには、次のサンプル画面をご覧ください。
意図したポップ画面は、上にある緑色の背景色のポップアップ画面だけですが、同時に、下にも同じポップアップ画面が表示されてしまいました。
この原因は、よく考えてみるとすぐにわかります。
このyahooページには、動画のiframe要素があります。そこでもbody要素が使用されているため、先の$("body").append(......)で、ふたつのbody要素にポップアップ画面が追加されてしまったためです。
このような失敗はよくあります。
実は、このポップアップは、自作の「AmebaSearchReplayプラグイン2.0」をテストしているときに見つかりました。このプラグインはまだ、公開はしていません。
yahooページだけでなく、その他の多くのwebページでは、やはり、iframe要素を使用していることが多いです。
そのため、場合によっては、もっと多くの副産物が表示されていまうこともあります。
怪我の功名
今回のことで、このようなことが発生しないように、対処することを検討しています。
二つ目以降のポップアップは、iframeオブジェクトのdocumentに存在する
要素が原因でした。そのため、そのような場合のbodyを特定して、その場合は、appendしないようにします。以下のコードが、それを可能にします。
$("body",parent.document).append(html);
これは、親のbody要素のみをappend()の対象にして、子のiframeのbody要素にはappend()しません。かなり、有効な方法です。
この処理を行うと、上図のように、iframe内のbodyには、ポップアップが表示されません。
あとがき
プラグインを使用すると、任意のwebページで、ポップアップ画面を表示できます。これは、便利ですが、注意しないと、今回のようなことが起こります。
このプラグインは、AmebaSearchReplayプラグインで発生したものですが、このプラグインはまだ公開できていません。
もうしばらくすると公開できると思いますので、それまで、お待ち願います。