この記事の例では、埋め込まれたiframeチャイルドページと親ページJS通信の方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
IFRAMEフレームワークのページとメインページの間の通信方法は、IFRAMEのSRC属性が同じドメインリンクまたはクロスドメインリンクにリンクされているかどうかによって明らかに異なります。同じドメインでのデータ交換とDOM要素の相互アクセスははるかに単純ですが、クロスドメインにはコミュニケーションを達成するための賢い方法が必要です。
1。同じドメインの下での父と息子のページ間のコミュニケーション
親ページparent.html：
次のようにコードをコピーします：<html>
<head>
<script type = "text/javascript">
function seas（）{
alert（ "parent.html ------>私はparent.html"）;
}
関数callchild（）
{
//document.frames ["myframe"
myframe.window.say（）;
myframe.window.document.getElementbyid（ "button"）。value = "I chander";
}
</script>
</head>
<body>
<入力型=ボタン値= "callchild（）">
<iframe name = "myframe" src = "child.html"> </iframe>
</body>
</html>
subpage child.html：
次のようにコードをコピーします：<html>
<head>
<script type = "text/javascript">
function sees（）
{
alert（ "child.html --->私はchild.html"）;
}
関数callparent（）{
parent.say（）;
parent.window.document.getelementsbyname（ "myframe"）[0] .style.height = "100px";
}
</script>
</head>
<body>
<入力id = "button" type = button value = "say（）function in parent.html" onclick = "callparent（）">
</body>
</html>
メソッド呼び出し
上記の例に示すように、親ページの子ページを呼び出す方法は、framename.window.childmethod（）で使用できます。 （この方法は、さまざまなブラウザと互換性があります）
親ページを呼び出す子ページのメソッド：parent.window.parentmethod（）;
DOM要素アクセス
Framename.Windowに従ってChild Windowオブジェクトを取得した後、DOM要素にアクセスすることは、同じページのDOM要素にアクセスすることと違いはありません。次のようにコードをコピーできます：document.getElementById（）、document.getElementsByname（）[index]たとえば、次のようにコードをコピーします。parent.window.document.getelementsbyname（ "myframe"）[0];
myframe.window.document.getElementByID（ "ボタン"）ウィンドウを省略できます。
注意すべきこと
iframeがロードされた後に操作が実行されることを確認するために、iframeがロードされていない場合、間違いなくエラーが発生します。 iframeがロードされているかどうかを判断するには、次の2つの方法があります。
1。iframeでオンロードイベントを使用します。
2。document.readystate == "complete"を使用して判断します
2。クロスドメインの親子ページコミュニケーション方法
iframeが外部ページをリンクする場合、セキュリティメカニズムのため、同じドメイン名の下の通信方法を使用できません。
親ページはデータをチャイルドページに渡します
実装手法は、ロケーションオブジェクトのハッシュ値を使用し、通信データを通過することです。 IFRAMEのSRC（データは渡すデータ）の後に追加の#DATA文字列を追加するだけで、子ページで特定の方法でデータを取得する必要があります。実際、一般的な方法は次のとおりです。
1. setintervalメソッドを使用してlocation.hrefの変更を聞いて、上記のデータ情報を取得することにより、サブページにタイマーを設定します
2。その後、サブページは、このデータ情報に基づいて対応する論理処理を実行できます。
子のページは、データを親ページに渡します
実装手法は、子ページに埋め込まれ、親ページと同じドメインに留まる必要があるプロキシiframe Cを使用することです。次に、子ページのデータをそれを使用してIframecに渡すことができ、上記の最初の通信方法の実装原則を完全に利用できます。次の質問は、IframecがデータをメインページAに渡す方法です。Iframecとメインページは同じドメインにあるため、それらの間でデータを渡す方がはるかに簡単になります。これは、同じドメイン名の下の通信問題です。前述のように、ここでは、頻繁に使用されるプロパティWindop.top（window.parent.parentを使用することもできます）を使用できます。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。