通信方法は、IFRAMEのSRC属性が同じドメインリンクまたはクロスドメインリンクにリンクされているかどうかによって異なります。
1。同じドメインの下での父と息子のページ間のコミュニケーション
親ページparent.html
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
function seas(){
alert( "parent.html");
}
関数callchild(){
myframe.window.say();
myframe.window.document.getElementbyid( "button")。value = "call end";
}
</script>
</head>
<body>
<入力id = "button" type = "button" value = "child.html seas()" onclick = "callchild()"/>の関数を呼び出す
<iframe name = "myframe" src = "child.html"> </iframe>
</body>
</html>
child.html
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
function seas(){
alert( "child.html");
}
関数callparent(){
parent.say();
parent.window.document.getElementById( "Button")。value = "call end";
}
</script>
</head>
<body>
<入力id = "button" type = "button" value = "parent.html" onclick = "callparent()"/>のsay()関数を呼び出す
</body>
</html>
メソッド呼び出し
親ページは、子ページの方法を呼び出します:framename.window.childmethod();
子のページは、親ページの方法を呼び出します:parent.window.parentmethod();
DOM要素アクセス
ページのwindow.documentオブジェクトを取得した後、DOM要素にアクセスできます。
注意すべきこと
IFRAMEがロードされた後に操作が実行されることを確認するには、IFRAMEがまだロードされていない場合、内部のメソッドまたは変数の呼び出しを開始すると、エラーが発生します。 IFRAMEがロードされているかどうかを判断するには、次の2つの方法があります。
1. iframeでオンロードイベントを使用します
2。document.readystate == "complete"を使用して判断します
2。クロスドメインの親子ページコミュニケーション方法
iframeが外部ページをリンクする場合、セキュリティメカニズムが使用されないため、同じドメイン名の下の通信方法を使用できません。
親ページはデータをチャイルドページに渡します
実装手法は、ロケーションオブジェクトのハッシュ値を使用し、通信データを通過することです。親ページのiframeのSRCの後に追加のデータ文字列を追加し、何らかの方法でここでデータを即座に取得できます。たとえば
1. SetIntervalメソッドを介してサブページでタイマーを設定し、location.hrefの変更を聞いて上記のデータ情報を取得する
2。その後、サブページは、このデータ情報に基づいて対応する論理処理を実行します。
子のページは、データを親ページに渡します
実装手法は、子ページに埋め込まれており、親ページと同じドメインに留まる必要があるプロキシiframeを使用することです。次に、それを通して、上記の最初の通信方法の実装原則を完全に利用し、子ページのデータをプロキシiframeに渡します。次に、プロキシiframeとメインページは同じドメインにあるため、メインページは同じドメインを使用してこのデータを取得できます。 window.topまたはwindop.parent.parentを使用して、ブラウザのトップレベルのウィンドウオブジェクトへの参照を取得します。