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プロジェクトをデプロイする詳細な手順

推薦する

ElementUI の el-dropdown に複数のパラメータを実装する方法

最近、業務上のボタンの増加により、ページレイアウトにボタンが多すぎて、ページが美しくなく、ユーザーエ...

Vue で Openlayer を使用して読み込みアニメーション効果を実現する

注意: スコープアニメーションは使用できません。 ! ! ! GIF経由 <テンプレート>...

Bootstrap 3.0 学習ノート CSS関連補足

この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

デザインストーリー: ナンバープレートを覚えられない警備員

<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...

CSV、Excel、SQL ファイルを MySQL にインポートするためのヒント

1. csvファイルをインポートする次のコマンドを使用します。 1.mysql> infile...

ウェブデザイナーもウェブコーディングを学ぶ必要がある

多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...

忘れられたボタンタグ

注:この記事は他の人によって翻訳されていますが、考えるべき点が多く、理解しにくい点もあると感じていま...

Linux の netstat コマンドの詳細な紹介

目次1. はじめに2. 出力情報の説明3. netstatの共通パラメータ4. netstatネット...

vue3+ts+EsLint+Prettier 標準コード実装

目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...

MySQL インデックス使用状況監視スキル (収集する価値あり!)

概要リレーショナル データベースでは、インデックスは、データベース テーブル内の 1 つ以上の列の値...

JavaScript モバイル H5 画像生成ソリューションの説明

現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...