iframe クロスドメイン通信 encapsulation_jquery の詳細説明

iframe クロスドメイン通信

デモを見る ソース コードのダウンロード

ご存知のとおり、クロスドメイン アクセスに関してフロントエンド JavaScript によって課されるセキュリティ制限により、JavaScript はそれを含むドキュメントと同じドメイン内のコンテンツにのみアクセスできます。

使用例:

要件は、iframe を介して http://www.demo.org/top.html に http://www.iframe.com/iframe.html を埋め込むことです。 iframeページで、ボタンをクリックしてトップページのjsメソッドを呼び出したいとします。

1. 内部ページで使用するメソッドをトップページに作成します

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

関数 testFun (テキスト) {
アラート(テキスト);
}

2. iframeをhttp://www.demo.org/top.html

に埋め込みます。

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

ae9639acdf18903f51e08a71832c498e065276f04003e4622c4fe6b64f465b88

3. www.demo.org ドメイン http://www.demo.org/proxy.html でクロスドメイン通信用のプロキシ ページを作成します

4. http://www.demo.org/proxy.html
にプロキシ ページのロジックを追加します。

5. http://www.iframe.com/iframe.html ページで、js を使用してプロキシ ページのアドレスを設定します。

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

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. Kissy を通じて通信モジュールをロードします

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

KISSY.use('topproxy', function(S, TopProxy){
//コードを実行
});

7.

http://www.iframe.com/iframe.html の TopProxy.call を通じて http://www.demo.org/top.html に直接アクセスします。 などの のメソッド

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

呼び出しメソッドの最初のパラメータは、「.」をサポートする外部 Web ページのグローバル メソッド名です。後続のパラメータは無制限で、すべてターゲット メソッドに渡されます。

注:

1. 呼び出し直後に実行されない場合があります。プリロードしたい場合は、事前に無駄なメソッドを実行することができます。

2. TopProxyConfig が設定されていない場合、参照される iframe と親 iframe は同じドメイン (大きなドメイン) にあるとみなされ、最上位のオブジェクトが直接呼び出されます。
3. IE678 では、システムメソッドが apply をサポートしていないため、先頭でシステムメソッドを直接呼び出すとエラーが報告される場合があります。

原則:

ページ A は iframe ページ B に埋め込まれています。B が A のメソッドを呼び出してデータを渡したい場合、B はページ A と同じドメインに iframe ページ C を埋め込むことができます。C は window.top ウィンドウを通じて A にアクセスできます。次に、B で、C の href のハッシュを変更して C に情報を渡し、その後 C がその情報を A に渡すことで、B が A に情報を送信するという目的を間接的に達成できます