[HTML] iframe を徹底的にマスターする: その技術原則、利点と欠点、最適なアプリケーションシナリオ、実践的なガイドを理解する

序文：
1. 簡単な紹介と原則:
2. iframeの使用
3. iframe のロングポーリング
4. 適応型 iframe 広告埋め込み
- 1. スクロールバーを削除します。
- 2. iframeの高さを本体の高さに設定します
5. iframeのセキュリティ
6. iframeの制限事項
7. iframe の実践ガイド
要約する

序文：

Web アプリケーション開発では、他の Web ページのフレームワークを組み込むことが一般的な要件です。HTML タグは、iframe他のページを埋め込むために使用できるコンテナを提供し、サイズ変更やスクロールなどのいくつかの便利な機能が付属しています。

iframeこの記事では、iframe をより効果的に使用し、Web アプリケーション開発の効率を向上させるのに役立つことを期待して、技術原則、利点と欠点、最適なアプリケーションシナリオ、実践的なガイドラインを詳しく紹介します。

1. 簡単な紹介と原則:

<iframe>(インラインフレーム) 要素は、HTML ドキュメントを別の HTML ドキュメント内に埋め込むために使用される一般的な HTML 要素です。実際の効果は、あるドキュメントを別のドキュメントに埋め込むことであり、ユーザーは通常、ブラウザで親ドキュメントを参照しながら、子ドキュメントを表示して操作することができます。

<iframe>読み込まれるドキュメントはインラインフレームコンテンツ (IFC) と呼ばれます。このドキュメントのソースは、同じドメインのサーバーである場合も、別のドメインのコンテンツである場合もあります。後者の場合 (つまり、クロスドメインアクセス)、ブラウザーの同一オリジンポリシーにより、postMessage()などのメソッドを使用して親ウィンドウと子ウィンドウ間の通信を完了できます。

原則として、インラインフレームを使用し、それをembeddedホストドキュメントに追加します。インラインフレームのサイズ、URL、およびその他のオプションは、親ページによって決定されます。インラインフレーム内のコンテンツは、親ページとは独立してロード、解析、レンダリングされます。ページ。

1. iframe の主な機能:

Web ページのネストと埋め込みを実現: iframe は 1 つの Web ページに別の Web ページを埋め込むことができ、それによって複数の Web ページの共同および同時表示を実現します。
ページの部分更新を実装する: iframe 内のコンテンツは個別にロードしてレンダリングできるため、ページ全体を更新する代わりに動的な部分更新を実装するために使用できます。
Web ページのセグメント化を実現する: iframe を通じて、Web ページをさまざまなモジュールに分割し、それによって Web ページの機能をより明確にし、保守しやすくします。
さまざまなソースからのコンテンツの表示: iframe は、同じページにさまざまなソースからのコンテンツを埋め込むことができるため、サードパーティのビデオ、ニュース、広告など、サードパーティのプラットフォームやアプリケーションからのコンテンツを表示するために使用できます。

2. iframe の利点:

分离页面逻辑、モジュール化を実現し、ページ構築を容易にします。
不同域名スクリプトを分離して Web サイトのセキュリティを強化できます。
を達成し局部刷新、帯域幅を削減し、ウェブサイトのパフォーマンスを向上させます。
解决加载缓慢アイコンや広告などのローカルのサードパーティコンテンツの読み込みの問題。
スクリプトを並行してロードする機能。
方便管理, iframe のコンテンツを使用する必要があるページが複数ある場合は、iframe のコンテンツを変更するだけで統合管理を実現できます。
iframe は原封不动埋め込まれた Web ページを表示できます。

3. iframe の欠点:

これは検索エンジンの最適化には役立ちません。つまりSEO、検索エンジンがクロールしにくいコンテンツには役立ちませんiframe。
iframeロードされたコンテンツは追跡できず、詳細なログ記録を提供することは困難です。
親ページと子ページ間のデータ転送などのセキュリティ上の問題が発生しやすく、点击劫持攻撃のリスクがあります。
iframeリクエストの数とページのサイズが増加し、ページ速度が低下します。
大量のページが生成されるため、管理は簡単ではありません。
サーバーリクエストが増加するためhttp、大きな URL にはお勧めできません。
親ページをブロックするloadイベント
iframe とメインページは接続プールを共有しており、ブラウザには同じドメイン内の接続に制限があるため、ページに影響を及ぼします。つまり、并行加载サブドキュメントと親ドキュメントのリクエスト数が一緒に計算されます。。

4. 解決策:

上記の欠点を回避するには、次の措置を講じる必要があります。

使用量を減らし、Web ページの読み込み速度に影響を与えるコンテンツの埋め込みすぎを避ける必要があります。
ページレイアウトの混乱を避けるために、iframe の幅と高さを設定します。
セキュリティの問題を回避するために、必要に応じてiframe属性を動的に構成しますsrc。
CSSと協力して、 JavaScriptiframe スタイルとイベント処理のニーズを実装します。

5. iframe のアプリケーションシナリオ:

Web マップなどのサードパーティアプリケーションコンテンツを読み込みます。
iframe を介して同一オリジンまたはクロスオリジンのページをロードして、Web サイトのモジュール化を実現できます。
別のドメイン名からのコンテンツの埋め込みは、通常、ソーシャルメディアの埋め込み、オンラインビデオの再生などに使用できます。
これを使用して、JavaScript アプリケーションをロードし、サンドボックスモードを有効にし、ページの保守性を向上させることができます。
Facebook ソーシャルメディアプラグイン、カスタムマップ、オンラインフォーム、ライブチャット機能などの対話型コンポーネントを埋め込みます。

不同源iframe は同じページ内にコンテンツを埋め込むことができるため、一定のセキュリティリスクがあることに注意してください。したがって、 iframe を使用するときは、ページのセキュリティ安全问题など、いくつかのセキュリティの問題に注意する必要があります。同時に、複雑なページの埋め込みやネストを実装する場合は、次のような問題にも注意する必要があります。XSS攻击点击劫持页面的性能加载速度

2. iframeの使用

1. 共通の属性:

<iframe>要素の一般的なプロパティをいくつか示します。

src: ネストされたページの URL アドレスを指定します。
widthおよびheight: iframe フレームの幅と高さを指定します。
name: iframe の名前を指定し、 js でwindow.frames[name]iframe にアクセスします。
scrolling: スクロールバーを表示するかどうかを決定します。scrolling = "auto"スクロールバーを表示するかどうかを自動的に決定するか、「はい」と「いいえ」を設定してスクロールバーを常に表示するか非表示にするかを指定できます。
frameborder: 表示コンポーネントの境界線を指定します。境界線を表示するかどうかを「0」、「1」、「no」、「yes」の値で指定できます。
sandbox: Web ページが iframe に埋め込まれている場合に使用できる機能を指定し、iframe に含まれるリソースの権限とセキュリティを指定します。
allowfullscreen: 全画面モードでのビデオ再生を許可するかどうかを指定します。
referrerpolicy: HTTP リクエストのアサーションにrefererヘッダーを設定するタイミングを指定します。
allowpaymentrequest: iframe 内のページがユーザーにアクセス許可を要求できるようにします。
allowpopup: インラインフレーム内のリンクをクリックすると、新しいウィンドウがポップアップするようにします。
allowtransparency: iframe で透明度を指定できるようにします。

これらの属性のうち、srcやなどの基本的な属性はwidth/height指定する必要があります。他のプロパティは、特定のアプリケーションシナリオによって異なります。

2.使用方法（操作方法）：

iframe (インラインフレーム) は、HTML ドキュメントを別の HTML ドキュメント内に埋め込むために使用される HTML 要素です。以下に、iframe の一般的な使用シナリオと関連する操作方法を紹介します。

1. iframeの簡単な使い方

HTML ページでは、<iframe>要素を使用してネストされたページを作成できます。<iframe>要素を使用する場合は、src埋め込みページの URL を指定する属性を設定する必要があります。例えば：

<iframe src="https://www.example.com"></iframe>

このコードは、https://www.example.com のページコンテンツを現在のページに埋め込みます。

2.iframe要素を取得する

iframe 要素を取得するには、JavaScript でメソッドを使用し、 iframe の属性値をパラメータとしてdocument.getElementById()渡すことができます。id例えば：

<iframe id="myFrame" src="https://www.example.com"></iframe>

var iframe = document.getElementById('myFrame');

このコードは、指定された ID「myFrame」を持つ iframe 要素を取得します。

3. iframe要素の値を取得する

iframe 要素内のコンテンツの値を取得するには、JavaScript の属性を使用できますcontentDocument。例えば：

<iframe id="myFrame" src="https://www.example.com"></iframe>

var iframe = document.getElementById('myFrame');
var iframeContent = iframe.contentDocument.body.innerHTML;

上記のコードは、指定された ID「myFrame」を持つ iframe 要素の内部 HTML コンテンツを取得します。

4. iframe は親ページから情報を取得します

iframe では、window.parentプロパティを使用して、それが存在する親ウィンドウオブジェクトを取得できます。このオブジェクトを通じて、親ページと子ページ間の相互通信を実現できます。例えば：

親ページ内:

<iframe id="myFrame" src="https://www.example.com"></iframe>

function getTextFromIframe() {
    
    
  var iframe = document.getElementById('myFrame');
  var iframeContent = iframe.contentDocument.body.innerHTML;
  iframe.contentWindow.postMessage({
    
     message: 'getIframeContent' }, '*');
}

window.addEventListener('message', function(event) {
    
    
  if (event.data.message === 'getIframeContent') {
    
    
    var iframeContent = document.getElementById('myFrame').contentDocument.body.innerHTML;
    event.source.postMessage({
    
     message: 'iframeContent', content: iframeContent }, '*');
  }
});

iframe 内:

window.addEventListener('message', function(event) {
    
    
  if (event.data.message === 'getIframeContent') {
    
    
    var iframeContent = document.getElementById('myFrame').contentDocument.body.innerHTML
    event.source.postMessage({
    
     message: 'iframeContent', content: iframeContent }, '*')
  }
})

上記のコードは、指定された ID " " を持つ iframe 要素の内部 HTML コンテンツを取得しmyFrame、window.postMessage()メソッドを通じてそのコンテンツを親ウィンドウに送信します。親ウィンドウでイベントリスナーを追加すると、iframe によって返されるコンテンツを取得できます。

3. iframe のロングポーリング

ロングポーリングとは、元の関数が再度実行されるときのことです。ここでの iframe の使用についても同様です。iframe を非同期的に作成してからリロードしますajax。readyState = 4

var iframeCon = docuemnt.querySelector('#container'),
  text; //传递的信息
var iframe = document.createElement('iframe'),
  iframe.id = "frame",
  iframe.style = "display:none;",
  iframe.name = "polling",
  iframe.src = "target.html";
iframeCon.appendChild(iframe);

iframe.onload = function () {
    
    
  var iloc = iframe.contentWindow.location,
    idoc = iframe.contentDocument;

  setTimeout(function () {
    
    
    text = idoc.getElementsByTagName('body')[0].textContent;
    console.log(text);
    iloc.reload();  // 刷新页面,再次获取信息，并且会触发 onload 函数
  }, 2000);
}

ここでの iframe の使用についても同様で、iframe を非同期的に作成してから再読み込みします。このようにして、ajax ロングポーリングの効果を実現できます。
もちろん、ここでは情報reloadを取得するためにのみ使用していますが、情報を送信するために添加 iframe使用することもできます删除 iframe。これらはすべて、特定のシナリオに応じて適用されます。
さらに、 iframe にも実装できます异步加载 js 文件が、iframe とホームページは接続プールを共有するため、現在では基本的にとによって禁止されていXHRますhard callback。

4. 適応型 iframe 広告埋め込み

広告は通常、元のテキストとは何の関係もありませんがdiv、特定の直下に広告がネストされると問題が発生したり网页布局的紊乱、追加の css ファイルや js ファイルを導入する必要が生じたりして、Web ページのセキュリティが大幅に低下します。これらの欠点はすべて、iframe を使用することで解決できます。

iframe は 1 つのものとして理解でき沙盒、内部のコンテンツをtop window完全に制御でき、ホームページの CSS スタイルが iframe 内のスタイルを侵害することはありません。

デフォルトでは、iframe には独自のスクロールバーがあり、全画面表示にはなりません。iframe を調整する場合は、次のようにします。

1. スクロールバーを削除します。

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

2. iframeの高さを本体の高さに設定します

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

5. iframeのセキュリティ

1. アンチネスト Web ページ

iframe がclick優先され、誰かが偽のホームページをクリックしたとき、iframe をクリックすると、デフォルトで iframe のページを操作することになります。したがって、フィッシング Web サイトはこのテクノロジーを使用してユーザーのクリックを誘導します。

Web サイトがフィッシングされるのを防ぐために、window.topWeb ページが iframe にならないようにすることができます。これは、Web ページをどの Web ページにもネストできないことを意味します。

// iframe2.html
if (window != window.top) {
    
    
  window.top.location.href = correctURL;
}

2、Xフレームオプション

X-Frame-Optionsこれは、対応するヘッダーであり、主にサーバーの Web リソースの iframe 権限を記述します。オプションは 3 つあります。

DENY:現在のページは、同じドメイン名のページにネストされている場合でも、 iframe にネストすることはできません。また、Web ページ内にネストされた iframe を持つこともできません。
SAMEORIGIN: iframe ページのアドレスは、同じオリジンドメイン名のページのみにすることができます
ALLOW-FROM:指定したオリジン URLの iframe にロード可能

簡単な例:

X-Frame-Options: DENY
拒绝任何iframe的嵌套请求

X-Frame-Options: SAMEORIGIN
只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入

X-Frame-Options: ALLOW-FROM http://s3131212.com
只允许指定网页的iframe请求，不过兼容性较差Chrome不支持

X-Frame-Options実際にはフロントエンドjsによるiframeの制御をサーバーに渡して処理することになります。

// js
if (window != window.top) {
    
    
  window.top.location.href = window.location.href;
}
// 等价于
X-Frame-Options: DENY

// js
if (top.location.hostname != window.location.hostname) {
    
    
  top.location.href = window.location.href;
}
// 等价于
X-Frame-Options: SAMEORIGIN

この属性は、ページの iframe に対する主要な制限です。ただし、iframe には複数のヘッダーが関係しており、別のヘッダーがあり、Content Security Policyiframe も制限される可能性があります。

3、サンドボックス

sandboxこれは、指定された iframe のサンドボックスモデルを設定して、iframe のアクセス許可をさらに制限するために使用されます。
サンドボックスはのh5新しい属性であり、IE10+サポートされています。

これを有効にするには、サンドボックス属性を使用します。

<iframe sandbox src=”...”></iframe>

これにより、iframe ページに一連の制限が課せられます。

scriptスクリプトを実行できません
ajaxリクエストを送信できません
ローカルストレージなどは使用できませlocalStorageんcookie。
新しいポップアップは作成できません。window
送信できません表单
flashなどの追加のプラグインをロードできません。

同時に、一部の権限を緩和することもできます。サンドボックスでいくつかの簡単な設定を行います。

<iframe sandbox=”allow-same-origin” src=”...”></iframe>

一般的に使用される構成は次のとおりです。

構成	効果
許可フォーム	フォームの送信を許可する
許可スクリプト	実行スクリプトを実行する
同一オリジンを許可する	ajax やストレージなど、同じドメインからのリクエストを許可する
トップナビゲーションを許可	iframe がページジャンプの window.top を支配できるようにする
ポップアップを許可する	window.open、target="_blank" など、新しいウィンドウが iframe にポップアップ表示されるようにします。
許可ポインタロック	マウスは iframe でロックできます。主にマウスのロックに関連します。

sandboxで許可する権限を追加できます。

<iframe sandbox=”allow-forms allow-same-origin allow-scripts” src=”...”></iframe>

これにより、js スクリプトの実行が保証されますが、iframe での JavaScript の実行は禁止されます。top.location = self.location

6. iframeの制限事項

1. 作成は通常の DOM 要素より 1 ～ 2 桁遅くなります。

iframeの作成は、scriptsやcssなどのDOM他の要素の作成よりも遅くなり1-2 个数量级ます。一般に、iframe を使用するページにはあまり多くの iframe が含まれないため、DOM ノードの作成に費やされる時間は大きな割合を占めません。しかし、それは他のいくつかの問題をもたらします:onloadイベントと接続プーリング( connection pool)

2. ページの読み込みをブロックする

時間内にウィンドウイベントをトリガーすることがonload非常に重要です。onload イベントは、ブラウザの「ビジー」インジケーターを停止して、現在の Web ページが読み込まれたことをユーザーに通知します。onload イベントが遅延すると、ユーザーは Web ページが非常に遅いと感じます。

window の onload イベントは、すべての iframe (内部の要素を含む) が読み込まれた後にトリガーされる必要があります。SafariとではChrome、 JavaScript 动态设置 iframe 的 SRCこのブロッキング状況は次の方法で回避できます。

3. 唯一の接続プール

ブラウザはサーバーに対して少数の接続しか開くことができません。およびをweb含む古いブラウザでは、 1 つのドメイン名 ( ) に対して同時に2 つの接続しか開くことができません。この数の制限は、ブラウザの新しいバージョンでは増加されました。1つのドメイン名に対して同時に4 つの接続を開くことができ、同時に6 つの接続を開くことができます。Internet Explorer 6 & 7Firefox 2hostnameSafari 3+Opera 9+Chrome 1+IE 8Firefox 3

ほとんどのブラウザでは、メインページとその中の iframe がこれらの接続を共有します。これは、リソースの読み込み中に iframe が利用可能な接続をすべて使い果たす可能性があることを意味します阻塞了主页面资源的加载。もちろん、iframe 内のコンテンツがメインページのコンテンツよりも重要な場合には、これは適切です。ただし、通常、iframe 内のコンテンツはメインページのコンテンツほど重要ではありません。この時点で、iframe 内の使用可能な接続が不足しても意味がありません。解決策の1 つは、メインページの重要な要素が読み込まれた後に iframe を動的に設定するsrcことです。

4. SEO に貢献しない

検索エンジンクローラーはiframe を解釈できません。

さらに、iframe 自体は動的言語ではないため、スタイルとスクリプトを追加でインポートする必要があります。要約すると、iframe は注意して使用する必要があります。

7. iframe の実践ガイド

実際の開発ではiframeテクノロジーを使用する必要があることがよくありますが、参考のために関連する提案をいくつか紹介します。

同じサイト内のコンテンツを iframe 経由で読み込む必要がある場合は、Ajax代わりにを使用できます。
搜索引擎埋め込みページコンテンツはコンテンツインデクサーによって外部からクロールできないため、インデックス作成に iframe を使用することはお勧めできません。
埋め込みページがに属する場合は第三方站点、他のセキュリティ問題に注意する必要があります身份验证。
Canvas表示、動的効果、 iframeSVGの使用など、一部の特定のアプリケーションシナリオでは、 iframe を使用できます。WebGL图形渲染

要約する

<iframe>要素には幅広い使用シナリオがあります。その利点は、Web ページを別の Web ページに埋め込んで、より豊かな対話とユーザーエクスペリエンスを実現できることですが、同時に、postMessage()他の方法を使用して、親ウィンドウと子ウィンドウ間の通信を実現できることです。しかし、<iframe>これらの要素にも欠点があり、クロスドメインアクセスやモバイルデバイスのパフォーマンスにいくつかの問題があります。<iframe>実際のアプリケーションでは、特定の状況に基づいて使用するかどうかを判断し、合理的なソリューションを選択する必要があります。