1. ホーム
  2. Web制作
  3. HTML/Xhtml

ポップアップレイヤー・アンダーレイとしてのiFrameの素晴らしさ

2022-01-10 05:03:29
最近、仕事で布のポケットを愛用するプロジェクトがあります。要するに、ブードルのページで気に入った写真を集めるというもので、iframeの側面を多用したもので、要約すると次のようになります。
1. ボトムオーバーレイを敷くためのポップアップレイヤーとして
このようにページ全体を覆うようなブラックマスクをして、たまたまユーザーがIE6を使っていて、たまたまページ上にselect要素があると、頭が痛くなります(ここでは原理は説明しませんが)。ポップアップDIVではselectをカバーできないことがわかるので、今度はiframeが登場する番です。そのロジックは以下の通りです。
iframeをポップアップのdivと同じレベルに配置します。
iframe の z-index が popup div の z-index よりも小さいことを確認する。
ウィンドウのリサイズとスクロールのイベントを追加して、iframe がページ全体をカバーするようにします。
コードの一部
コピーコード
コードは以下の通りです。

var iframe = U.isie6() ? '<iframe style="position:absolute;left:0;top:0;z-index:2000000;filter:Alpha(opacity=0); width:100%;height:' + ds.height + '" ; frameborder="0"></iframe>' : '';
$container.append(iframe).appendTo($body);

2. ドメインをまたいだCookieの書き込み
a.comとb.comという2つのドメインがあります。特定の条件下では、bの機能の一部がaのページに表示されます。aのページを操作する際に、b.comドメインのクッキーを操作して、ユーザーの次回の訪問を容易にする必要がある場合があります。aページに、src属性がbのプロキシページを指すiframe(動的または固定)を追加し、このページでクッキーの操作を行うだけでよいのです。