iframe とは何ですか?その機能は何ですか?

1：iframeの概念と機能

iframe は、埋め込みフレーム、html タグ、またはインライン要素です. iframe 要素は、別のドキュメントを含むインライン フレーム (つまり、インライン フレーム) を作成します. 率直に言うと、iframe は、他のページをページ。

通常、iframe を使用して、ページのネストされた iframe タグで src を直接指定します。

<iframe src="demo_iframe.html"></iframe>

2：iframeのメリットとデメリット

アドバンテージ：

1. ページはプログラムから分離されており、外部の js や css の影響を受けにくく、使いやすい

2.ページのヘッダースタイルや下部の著作権情報など、コードの再利用率を向上させるために、iframeを介して共通のページをネストできます

3. ページをリロードするとき、iframe フレーム ページのコンテンツをリロードする必要がないため、ページのリロード速度が向上します。

4. iframe は、サードパーティのコンテンツの読み込みが遅いという問題を解決できます。

欠点:

1. 管理しにくい大量のページが生成される

2. iframe フレームのコンテンツは検索エンジンにキャプチャされないため、iframe はホームページには適していません

3. iframe の互換性が低い

4. iframe には特定のセキュリティ リスクがあります

5. iframe は、メイン ページの Onload イベントをブロックします。

3：iframeと旧バージョンのframeの違い

1. Frame は frameSet とは別に使用できませんが、iframe は使用できます。

2.フレームはボディに配置できませんが、iframeは配置できます

3. frameSet にネストされた iframe は、本文に配置する必要があります

4. frame の高さは frameSet によってのみ制御できます; iframe はそれ自体で制御できますが、frameSet では制御できません。

5. iframe はフォームで使用できますが、フレームでは使用できません

6. HTML5 は iframe をサポートしますが、frame はサポートしません

7. Frame はほとんど使われておらず、iframe は常に強い

8. frame と iframe の機能は基本的に同じですが、iframe はより柔軟です.frame はページ全体のフレームであり、iframe は埋め込まれた Web ページ要素です.

4: iframe のいくつかの属性

1. .frameborder: 境界線を表示するかどうか、1 (はい)、0 (いいえ)
2. .height: 通常の要素としてのフレームの高さです。css を使用して設定することをお勧めします。
3.  width: 通常の要素としてのフレームの幅。css 設定を使用することをお勧めします。
4.  name: フレームの名前で、window.frames[name] の特別な属性です。
5. .scrolling: フレームをスクロールするかどうか。はい、いいえ、自動です。
6. .src: 内部フレームのアドレス。ページのアドレスまたは画像のアドレスにすることができます。
7. .srcdoc 。元の HTML 本文のコンテンツを置き換えるために使用されます。でもIEは対応してないけどダメ
8. .sandbox: IE10+ でサポートされている iframe に関するいくつかの制限\

5: iframe 内のコンテンツを取得する

主な 2 つの API は contentWindow と contentDocument
iframe.contentWindow で、iframe の window オブジェクトを取得します
iframe.contentDocument は、iframe のドキュメント オブジェクトを取得します
これら 2 つの API は、DOM ノードによって提供されるメソッドのみです (つまり、getELement シリーズ オブジェクト)

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
       console.log("window",iwindow);//获取iframe的window对象
       console.log("document",idoc);  //获取iframe的document
       console.log("html",idoc.documentElement);//获取iframe的html
       console.log("head",idoc.head);  //获取head
       console.log("body",idoc.body);  //获取body

もう 1 つの簡単な方法は、Name プロパティを組み合わせて、window によって提供されるフレームを介して取得することです。

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>

6: iframe で親コンテンツを取得する

同様に、同じドメインの下で、親ページは子 iframe のコンテンツを取得でき、子 iframe も親ページのコンテンツを操作できます。iframe では、ウィンドウにマウントされたいくつかの API を介して取得できます。

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self

7: iframe 属性分析

1 align (HTML5 ではサポートされていません。HTML 4.01 では廃止されました。)

周囲の要素に対する <iframe> の配置を指定します。属性値は上、右、下、左、中央です

<iframe align = "top"> </iframe>

 

2 フレームボーダー (HTML5 ではサポートされていません)

<iframe> の周囲に境界線を表示するかどうかを指定します。

<iframe frameborder = "0"></iframe> // 境界線を表示しない

<iframe frameborder = "1"></iframe> //境界線を表示

3 marginheight (HTML5 ではサポートされていません)

<iframe> の上マージンと下マージンを指定します。実際、これは iframe の上下の内側マージンとして理解でき、この属性はデフォルトの表示スクロール バーを超えて iframe の高さを増加させません。

<iframe marginheight="10"></iframe>

 

4 marginwidth (HTML5 はサポートしていません)

上記のように、iframe の左右の内側のマージンは幅に影響せず、スクロール バーはそれを超えて表示されます。

5スクロール（HTML5非対応）

スクロールバーを表示するかどうか

<iframe scrolling="auto"></iframe> //デフォルト値、コンテンツがディスプレイをはみ出します

<iframe scrolling="yes"></iframe> //常に表示

<iframe scrolling="no"></iframe> //常に表示しない

 

幅6高さ（HTML5対応）

<iframe> の幅と高さ。属性値は固定値またはパーセンテージ (親コンテナーのパーセンテージ) にすることができます。

<iframe 幅 = "100%" 高さ = "200"></iframe>

 

7名（HTML5対応）

<iframe> の名前を指定します。

XHTML では、name 属性は推奨されておらず、削除されます。代わりに id 属性を使用してください。

<iframe name="helloworld"></iframe>

 

8 src (HTML5 サポート)

iframe によって表示されるコンテンツのアドレス

<iframe src="www.baidu.com"></iframe>

 

9 サンドボックス (HTML5 の新機能)

追加の制限として、HTML 5 はサンドボックス属性を通じて <iframe> のセキュリティを強化します。サンドボックス属性は、信頼されていない Web ページが特定の操作を実行するのを防ぎます。サンドボックスは、次の操作を防ぎます

親ページの DOM にアクセスします (技術的には、これは iframe が親ページとは別のソースになっているためです)

スクリプトを実行

独自のフォームを埋め込むか、スクリプトを介してフォームを操作します

Cookie、ローカル ストレージ、またはローカル SQL データベースの読み取りと書き込み

 

<iframe sandbox = ""></iframe> // 属性値の空の文字列は上記のすべての操作を制限します

<iframe sandbox = "allow-forms"></iframe> //フォームの送信を許可

<iframe sandbox = "allow-scripts"></iframe> //スクリプトの実行を許可

<iframe sandbox = "allow-same-origin"></iframe> //コンテンツを通常のオリジンとして扱うことを許可します。このキーワードを使用しない場合、埋め込みコンテンツは別のソースとして扱われます。

<iframe sandbox = "allow-top-navigation"></iframe> //埋め込みページのコンテキストは、コンテンツを最上位のブラウジング コンテキスト (ブラウジング コンテキスト) にナビゲート (ロード) できます。このキーワードが使用されていない場合、この操作は利用できません。

8: 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;

さらに、他の装飾的なプロパティを追加できます。

属性	効果
allowtransparency	true または false iframe を透明にするかどうか。デフォルトは false
フルスクリーンを許可する	true または false iframe フルスクリーンを許可するかどうか。デフォルトは false

 例を参照してください。

<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>

インラインで直接記述したり、css で定義したりできますが、広告の iframe の場合、スタイルは属性に記述されます。これが最善の方法です。