ポップアップレイヤー・アンダーレイとしての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(動的または固定)を追加し、このページでクッキーの操作を行うだけでよいのです。
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(動的または固定)を追加し、このページでクッキーの操作を行うだけでよいのです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン