ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript は HTML5 の window.postMessage を使用してクロスドメイン通信を実装します。

JavaScript は HTML5 の window.postMessage を使用してクロスドメイン通信を実装します。

WBOY
リリース: 2016-05-16 16:52:39
オリジナル
1838 人が閲覧しました

同一オリジンポリシーの制限により、クロスドメイン通信は JavaScript において常に厄介な問題でした。もちろん、多くの解決策があります。
1. document.domain iframe の設定は、同じメイン ドメインに適用されますが、異なるサブドメインに適用されます。
2. iframe と location.hash を使用して、データが直接公開されます。 URL、データ容量とタイプは制限されています
3.Flash LocalConnection。

が同じクライアント上にある限り、アプリケーション間で、オブジェクトは 1 つの SWF ファイル内または複数の SWF ファイル間で通信できます。ドメイン間で。
window.name はデータを保存し、クロスドメイン iframe 静的プロキシ動的送信スキームは、ページの URL が変わっても名前が変わらないという window.name の特徴を最大限に活用します。
インターネット上にはさまざまなソリューションのコード例が多数あり、自分で検索できます。

html5 の最も優れた API の 1 つであるクロス ドキュメント メッセージング。高度なブラウザである Internet Explorer 8、chrome、Firefox、Opera、Safari はすべてこの機能をサポートします。この関数の実装も非常にシンプルで、主に情報を受信する「message」イベントとメッセージを送信する「postMessage」メソッドが含まれます。

メッセージを送信する「postMessage」メソッド

外部ウィンドウにメッセージを送信します:

コードをコピーします コードは次のとおりです:
otherWindow.postMessage(message, targetOrigin);

otherWindow: ターゲット ウィンドウ、つまり、メッセージの送信先のウィンドウ (window.frames プロパティ) window.open メソッドによって作成されたウィンドウのメンバーまたはウィンドウ
パラメーターの説明:
1.message: は送信されるメッセージです。タイプは String です。オブジェクト (IE8 および 9 ではサポートされていません)
2.targetOrigin: Yes メッセージの受信範囲を制限するには、制限しない場合は '*' を使用してメッセージを受信します。



コードをコピー コードは次のとおりです。 var onmessage = function (event) {
var data =event.data;
varorigin =event.origin;
//do someing
}; ') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'unknown') {
//つまり
window.attachEvent ('onmessage', onmessage);
}

コールバック関数の最初のパラメーターが受信されます。 イベント オブジェクトには、一般的に使用される 3 つの属性があります。
1.data: message
2.origin:メッセージ ソース アドレス
3.source: ソース DOMWindow オブジェクト

もちろん、postmessage にもいくつかの欠点があります:
1.ie8、ie9 で渡されるデータ型値は文字列型をサポートしていますが、次のように使用できます。この問題を解決するには、JSON オブジェクトと文字列の間の相互変換を行う必要があります。
2.ie6、ie7 は互換性のあるソリューションを作成する必要があります。個人的には window.name の方が信頼性が高いと思います。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート