HTML における iFrame タグの 2 つの使用法

HTML における iFrame タグの 2 つの使用法

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ページに好きな写真を集めることです。このプロセスでは iframe のさまざまな側面が使用され、次のようにまとめることができます。
1. 下部を覆うポップアップレイヤーとして

ページ全体を覆う黒いマスクを作成したことがあり、ユーザーがたまたま IE6 を使用していて、ページに選択要素があった場合、頭を悩ませることになります (ここでは原理については説明しません)。ポップアップ DIV では選択部分をカバーできないため、iframe が表示される番になります。ロジックは次のとおりです。

ポップアップdivと同じレベルにiframeを配置する
iframe の z-index がポップアップ div の z-index よりも小さいことを確認します。
ウィンドウのサイズ変更とスクロールイベントを追加して、iframe がページ全体をカバーできるようにします。

コードの一部

XML/HTML コードコンテンツをクリップボードにコピー
  1. var iframe = U .isie6() ? ' < iframe  スタイル= "位置:absolute;左:0;上:0;z-index:2000000;フィルター:Alpha(不透明度=0);幅:100%;高さ:' + ds.height + '"   frameborder = "0" > </ iframe > ' : '';
  2. $container.append(iframe).appendTo($body);

2. ドメイン間でのクッキーの書き込み

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

<<:  TypeScript のクラス

>>:  Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順

推薦する

CentOS 7 に mysql5.7 の解凍バージョンをインストールするチュートリアル

1. mysqlの圧縮パッケージを/usr/localフォルダに解凍し、名前をmysqlに変更します...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN

垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...

Nginx リバース プロキシを使い始める

目次概要リバースプロキシの役割Nginx リバース プロキシ イントラネット侵入 8081 ポートの...

Tomcat は親の委任メカニズムを破壊して Web アプリケーションの分離を実現します。

目次Tomcat クラスローダー階層WebAppクラスローダー共有クラスローダーカタリナクラスローダ...

Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....

CocosCreatorでシューティングゲームを作る詳しい解説

目次シーン設定ゲームリソース砲塔の回転動的に生成された弾丸衝突計算効果を高めるターゲットの動き弾薬庫...

MySQLのMVCCマルチバージョン同時実行制御の実装

1 MVCCとは何かMVCC の正式名称は、マルチバージョン同時実行制御です。データベースへの同時ア...

知っておくべきHTML最適化テクニック

Web ページのパフォーマンスを向上させるために、多くの開発者は、JavaScript、画像の最適化...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

Ubuntu で nginx を使用して WebDAV ファイル サーバーを構築する詳細なプロセス

nginxをインストールするnginx-fullをインストールする必要があることに注意してください。...

CSSレイアウトにおけるフロート属性と位置属性の違い

CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...