埋め込まれた iframe サブページと親ページ間の通信方法 js_javascript スキル

この記事の例では、埋め込まれた iframe サブページと親ページ js の間で通信する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

iframeフレーム内のページとメインページ間の通信方法は、iframe内のsrc属性が同一ドメインリンクかクロスドメインリンクかによって、当然データのやり取りや相互の通信方法が異なります。同じドメイン内の DOM 要素へのアクセスは簡単ですが、クロスドメインの要素には通信を実現するためのいくつかの賢い方法が必要です。

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

親ページparent.html:

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

<頭>
<スクリプトタイプ="text/javascript">
関数say() {
alert("parent.html------>私はparent.htmlにいます");
}
関数 callChild()
{
//document.frames["myFrame"].window.say();//IE ブラウザにのみ適用されます
myFrame.window.say();
myFrame.window.document.getElementById("button").value="変更しました";
}

子ページ child.html:

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

<頭>
<スクリプトタイプ="text/javascript">
関数say()
{
alert("child.html--->私は child.html にいます");
}
関数 callParent() {
親.say();
parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
}

メソッド呼び出し

上記の例に示すように、親ページは FrameName.window.childMethod(); を通じて子ページを呼び出すことができます (このメソッドはさまざまなブラウザーと互換性があります)
子ページは親ページのメソッドparent.window.parentMethod();

を呼び出します。

DOM 要素へのアクセス

FrameName.window に基づいて子ウィンドウ オブジェクトを取得した後、その中の DOM 要素にアクセスすることは、同じページ内の DOM 要素にアクセスすることと同じです。

Copy を渡すことができます。 code コードは次のとおりです:

document.getElementById(),document.getElementsByName()[index]

例:

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

parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("ボタン")

窓は省略可能です。

メモ

必ず Iframe が読み込まれてから操作してください。Iframe が読み込まれる前にメソッドや変数の呼び出しを開始すると、間違いなくエラーが発生します。 Iframe がロードされているかどうかを確認するには 2 つの方法があります:

1. Iframe で onload イベントを使用します。
2. document.readyState=="complete" を使用して

を決定します

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

iframeが外部ページにリンクしている場合、セキュリティの仕組み上、同一ドメイン名での通信方法は利用できません。

親ページが子ページにデータを渡します

これを実現する秘訣は、location オブジェクトのハッシュ値を使用して、通信データを渡すことです。親ページの iframe の src の後に #data 文字列を追加するだけです (data は、ユーザーが指定したデータです)。ここでのデータは、ページ上の何らかのメソッドを通じて即座に取得できます。実際、一般的に使用されるメソッドは次のとおりです。

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

2. その後、サブページはこのデータ情報に基づいて対応する論理処理を実行できます。

子ページは親ページにデータを渡します

実装のコツは、プロキシ Iframe C を使用することです。これは子ページに埋め込まれており、親ページと同じドメインに存在する必要があります。これにより、上記の最初の通信メソッドの実装原則を最大限に活用できます。次の質問は、iframeC からメイン ページ A にデータを渡す方法です。iframeC とメイン ページは同じドメイン内にあるため、iframeC とメイン ページの間でデータを転送するのがはるかに簡単になります。これらは同じドメイン名に属しています。前述したように、ここではトップレベル ウィンドウへの参照を返す一般的に使用されるプロパティ window.top を使用できます (window.parent.parent も使用できます)。オブジェクトがブラウザにロードされるため、この方法で親ページのメソッドを直接使用できます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。