Iframe の内外のページで JS がどのように動作するかの概要

iframeの外側のiframeのコンテンツを取得する

方法1

contentWindow と contentDocument の 2 つの API を通じて:

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var document = iframe.contentDocument;
console.log("window",iwindow); //iframe のウィンドウ オブジェクトを取得します console.log("document",idoc); //iframe のドキュメントを取得します
console.log("html",idoc.documentElement);//iframe の HTML を取得します

このうち、iframe.contentWindow は iframe のウィンドウオブジェクトを取得でき、iframe.contentDocument は iframe のドキュメントオブジェクトを取得できます。

方法2

Name 属性と組み合わせて、ウィンドウによって提供されるフレームを通じて取得します。

<iframe src="/index.html" id="ifr1" name="ifr2" スクロール="はい">
  <p>お使いのブラウザは iframe をサポートしていません。</p>
</iframe>
<script type="text/javascript">
    コンソールにログ出力します。
    console.dir(document.getElementById("iframe").contentWindow);
</スクリプト>

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

window.parent は、前のレベルのウィンドウオブジェクトを取得します。それがまだ iframe である場合は、iframe のウィンドウオブジェクトになります。
window.topはトップレベルコンテナのウィンドウオブジェクト、つまり開いたページのドキュメントを取得します。

iframe内の親ページで定義されたメソッドと変数を呼び出す

ウィンドウの親メソッド。
ウィンドウの親の値。

親ページで iframe 子ページを操作するためのメソッドと変数

window.frames["iframe_Name"].window.childMethod();
window.frames["iframe_Name"].window.childValue;

要約する

Iframe を使用する際に注意すべき点がさらに 2 つあります。

必ず iframe が読み込まれた後に操作を実行してください。iframe が読み込まれる前に iframe 内のメソッドまたは変数を呼び出すと、エラーが発生します。
iframe が外部ページにリンクしている場合、セキュリティメカニズムは同じドメイン名での通信方法を使用できません。

iframe の読み込みが完了したかどうかを確認する

iframe.onload = 関数() {
    //やるべきこと
}

異なるドメインの通信

親ページから子ページへのデータの受け渡し

位置オブジェクトのハッシュ値を使用して、通信データを渡します。親ページの iframe の src の後にデータ文字列を追加し、子ページで何らかの方法でここでデータを即座に取得します。

サブページは親ページにデータを渡す

プロキシ iframe が使用されます。プロキシ iframe は子ページに埋め込まれ、親ページと同じドメインにある必要があります。次に、前述の同一ドメイン通信方式の実装原理を最大限に活用して、子ページのデータをプロキシ iframe に渡します。次に、プロキシ iframe とメインページは同じドメインにあるため、メインページは同じドメイン方式を使用してこれらのデータを取得できます。

Iframe の内外のページで JS がどのように動作するかについては、これで説明は終わりです。Iframe ページで JS がどのように動作するかについての関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: