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

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

WBOY

リリース： 2016-05-16 16:49:38

オリジナル

1160 人が閲覧しました

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 を使用して、ブラウザーの最上位ウィンドウオブジェクトへの参照を取得します。