JavaScriptはHTML 5のwindowを使います.postMessageドメイン間通信を実現する例
1797 ワード
JavaScriptは、同源ポリシーの制限により、ドメイン間通信が困難な問題となっています.もちろん解決策もたくさんあります.1.document.domain+iframeの設定は、メインドメインが同じでサブドメインが異なる場合に適用されます.2.iframeとlocationを利用する.hash、データはurlに直接暴露され、データ容量とタイプは限られている.Flash LocalConnectionでは、オブジェクトは1つのSWFファイルまたは複数のSWFファイル間で通信できます.同じクライアントであればいいです.アプリケーション間であれば、ドメイン間で通信できます.window.name保存データ及びドメイン間iframe静的エージェント動的伝送方式はwindowを十分に運用した.nameページのurlが変更されたためnameが変更されない特性.様々なシナリオのネット上にはインスタンスコードがたくさんありますので、自分で検索してみてください.html 5の中で最もクールなAPIの一つは、文書間メッセージ伝送Cross Document Messagingである.プレミアムブラウザInternet Explorer 8+,chrome,Firefox,Opera,Safariがこの機能をサポートします.この機能の実装も、主に情報を受信する「message」イベントとメッセージを送信する「postMessage」メソッドを含む非常に簡単である.メッセージを送信する「postMessage」メソッドは、外部ウィンドウにメッセージを送信します.
otherWindow:ターゲットウィンドウ、つまりどのwindowにメッセージを送るか、windowです.framesプロパティのメンバーまたはwindow.Openメソッド作成ウィンドウ
パラメータの説明:
1.message:String、Objectのタイプで送信するメッセージです(IE 8、9はサポートされていません)
2.targetOrigin:メッセージ受信範囲を限定しますので、制限なしに「*」を使用してください
メッセージを受信する「メッセージ」イベント
コールバック関数の最初のパラメータはEventオブジェクトを受信し、3つの一般的なプロパティがあります.
1.data:メッセージ
2.origin:メッセージソースアドレス
3.source:ソースDOMWindowオブジェクト
もちろんpostmessageにもいくつかの不足点があります.
1.ie 8,ie 9で渡されるデータ型値は文字列タイプをサポートするが、JSONオブジェクトと文字列との相互変換を用いてこの問題を解決することができる.
2.ie 6,ie 7は互換案を書く必要があり、個人的にはwindowと考えている.nameは頼りになる.
otherWindow.postMessage(message, targetOrigin);
otherWindow:ターゲットウィンドウ、つまりどのwindowにメッセージを送るか、windowです.framesプロパティのメンバーまたはwindow.Openメソッド作成ウィンドウ
パラメータの説明:
1.message:String、Objectのタイプで送信するメッセージです(IE 8、9はサポートされていません)
2.targetOrigin:メッセージ受信範囲を限定しますので、制限なしに「*」を使用してください
メッセージを受信する「メッセージ」イベント
var onmessage = function (event) {
var data = event.data;
var origin = event.origin;
//do someing
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
コールバック関数の最初のパラメータはEventオブジェクトを受信し、3つの一般的なプロパティがあります.
1.data:メッセージ
2.origin:メッセージソースアドレス
3.source:ソースDOMWindowオブジェクト
もちろんpostmessageにもいくつかの不足点があります.
1.ie 8,ie 9で渡されるデータ型値は文字列タイプをサポートするが、JSONオブジェクトと文字列との相互変換を用いてこの問題を解決することができる.
2.ie 6,ie 7は互換案を書く必要があり、個人的にはwindowと考えている.nameは頼りになる.