同じドメインまたは異なるドメイン内の iframe サブページと親ページ間の js 通信_javascript スキル

iframe サブページと親ページ間の通信方法は、iframe の src 属性が同一ドメイン リンクであるかクロスドメイン リンクであるかによって異なります。

1. 同じドメイン内の親ページと子ページ間の通信

親ページparent.html

コードをコピーします コードは次のとおりです:

input id="button" type="button" value="child.html で関数 Say() を呼び出す" onclick="callChild()"/>





サブページ child.html

コードをコピー

コードは次のとおりです。 ="text/javascript"> 関数 Say(){

alert("child.html");

関数 callParent(){
parent.say(); 🎜>parent.window.document.getElementById( "button").value="通話終了";

🎜>



メソッド呼び出し

親ページは子ページのメソッドを呼び出します: FrameName.window.childMethod();

子ページは親ページのメソッド:parent.window.parentMethod();
DOM 要素へのアクセス

ページの window.document オブジェクトを取得した後、DOM 要素
Notes

必ずiframeをロードしてから操作してください。 iframeがまだ残っている場合 ロードが完了する前にメソッドや変数の呼び出しを開始するとエラーが発生します。 iframe がロードされているかどうかを確認するには、次の 2 つの方法があります。

1. iframe の onload イベントを使用します

2. document.readyState=="complete" を使用して
を確認します。

2. クロスドメイン親子ページ通信方式


iframe が外部ページにリンクされている場合、同一ドメイン名での通信方式は使用できません。セキュリティメカニズム。
親ページは子ページにデータを渡します

その秘訣は、location オブジェクトのハッシュ値を使用し、それを介して通信データを渡すことです。親ページの iframe の src の後に追加のデータ文字列を追加し、何らかのメソッドを使用してサブページのデータを即座に取得します。たとえば、次のようにします。

1. setInterval メソッドはタイマーを設定し、location.href の変更を監視して上記のデータ情報を取得します

2. 次に、子ページはこのデータ情報に基づいて対応する論理処理を実行します
子ページデータを親ページに渡すテクニック
は、子ページに埋め込まれ、親ページと同じドメインに存在する必要があるプロキシ iframe を使用することで、次の実装原則を完全に利用します。上記の最初の通信メソッドで子ページを転送すると、ページのデータがプロキシ iframe に渡され、プロキシ iframe とメイン ページが同じドメインにあるため、メイン ページは同じドメイン メソッドを使用してデータを取得できます。 。 window.top または window.parent.parent を使用して、ブラウザーの最上位ウィンドウ オブジェクトへの参照を取得します。