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

推薦する

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

CSS における XHTML タグの対応する属性と使用法

XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...

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

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

React Hooks の一般的な使用シナリオ (概要)

目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

この記事はJavaScriptの変数とデータ型を理解するのに役立ちます

目次序文:親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...

ウェブフォーム送信方法の詳細な概要

まず、フォームを送信するいくつかの方法を見てみましょう。 1. <!--一般的な送信ボタン--...

Windows10システムにMySQL 5.7.17をインストールする

オペレーティング システム win10 MySQL は、公式 Web サイトからダウンロードした 6...

Chrome 4.0 は GreaseMonkey スクリプトをサポートします

GreaseMokey (中国語では Grease Monkey Script と呼んでいます) は...

alpineをベースにdockerfileで作成したtomcatイメージの実装

1.アルパインイメージをダウンロードする [root@docker43 ~]# docker pul...

Windows で MySQL マスター スレーブ レプリケーションを構成する方法

MySQL マスター/スレーブ レプリケーションを使用すると、1 つのデータベース (マスター デー...

コード分​​析を実現するためのFastDFSとNginxの統合

FastDFSとNginxの統合:トラッカーは、負荷分散と高可用性のために Nginx と組み合わせ...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

inline-blockプロパティとの互換性

<br />1年前、インターネット上にはinline-blockプロパティに関する記事は...