JavaScript_javascript スキルに実装された双方向のクロスドメイン プラグインの共有

ブラウザー (同一オリジン ポリシー) の制限により、JavaScript のクロスドメインの問題は常に厄介な問題です。 HTML5 は、Web ドキュメント間で相互に情報を送受信するドキュメント間メッセージ送信の機能を提供します。この機能を利用すると、同じオリジン（ドメインのポート番号）を持つWebページ同士の通信だけでなく、異なる2つのドメイン名間のクロスドメイン通信も実現できます。

クロスドキュメント メッセージング クロスドキュメント メッセージングは​​、異なる Web ドキュメント間でデータを転送するための postMessage メソッドを提供し、リアルタイム メッセージングをサポートします。 Google Chrome 2.0、Internet Explorer 8.0、Firefox 3.0、Opera 9.6、Safari 4.0 など、多くのブラウザーがこの機能をサポートするようになります。

では、IE6 や IE7 などのブラウザが HTML5 をサポートしていない場合はどうすればよいでしょうか?

window.name の変更にはクロスドメインの問題が含まれないため、window.name メソッドを使用できますが、その使用は特に理想的ではありません。
ただし、クロスドメインが関係するたびに、window.postMessage、window.addEventListener、window.name などを記述することはできません。

この目的のために、私はクロスドメインプロセス全体を抽象化し、それを JavaScript プラグインにカプセル化して、双方向のクロスドメイン問題を解決し、異なる Web ページドキュメント間のリアルタイム通信を実現し、クロスドメインを実現しました。 2 つの異なるドメイン名間のドメイン通信。

デモのダウンロード アドレス: http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar、バージョン v2

JavaScript クロスドメイン プラグイン jcrossdomain.js

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

(関数 (勝利){
/**
* 花のない木
* 2013/12/07 17:12
​*/
var _jcd = {
isInited : false,
elmt : false、
ハッシュ: '',
デリム : ',',
ランド:関数(){
return (新しい日付).getTime()
}、
msg : function(){
alert('警告: 最初に init 関数を呼び出す必要があります');
}、
init: function(callback, elmt){
If(_jcd.isInited == true)
return;
_jcd.isInited = true;
_jcd.elmt = elmt;
If(win.postMessage){
//ブラウザは HTML5 postMessage メソッドをサポートします
If(win.addEventListener){
//Firefox、Google、その他のブラウザをサポート
win.addEventListener("メッセージ", function(ev){
callback.call(win, ev.data);
},false);
}else if(win.attachEvent){
//IE ブラウザをサポート
win.attachEvent("onmessage", function(ev){
callback.call(win, ev.data);
});
}
_jcd.msg = 関数(データ){
_jcd.elmt.postMessage(data, '*');
}
}その他{
//ブラウザは、IE6 や 7 などの HTML5 postMessage メソッドをサポートしていません
setInterval(function(){
If (win.name !== _jcd.hash) {
_jcd.hash = win.name;
callback.call(win, _jcd.hash.split(_jcd.delims)[1]);
}
}, 50);
_jcd.msg = 関数(データ){
_jcd.elmt.name = _jcd.rand() _jcd.delims データ;
}
}
}
};

var jcd = {

initParent: function(callback, iframeId){
_jcd.init(callback, document.getElementById(iframeId).contentWindow);
}、

initChild : function(callback){
_jcd.init(callback, win.parent);
}、

sendMessage: function(data){
_jcd.msg(データ);
}

};
win.jCrossDomain = jcd;
})(ウィンドウ);

親 Web ページのメソッドの呼び出し:

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

//カスタムコールバック関数
var cb = function(msg){
alert("get msg:" msg);
};

//初期化、コールバック関数と iframe ID の読み込み
jCrossDomain.initParent(cb, 'iframeA');

//メッセージを送信
jCrossDomain.sendMessage('こんにちは、子');

サブ Web ページのメソッドの呼び出し:

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

//カスタムコールバック関数
var cb = function(msg){
alert("get msg:" msg);
};

//初期化、コールバック関数の読み込み
jCrossDomain.initChild(cb);

//メッセージを送信
jCrossDomain.sendMessage('こんにちは、親');

シミュレーション テストのヒント:
異なるドメイン間の通信を実現するには、シミュレーション用にオペレーティング システムのホスト ファイルに 2 つのドメイン名を追加します。

2 つの異なるドメイン名を hosts ファイルに追加します
127.0.0.1 親.com
127.0.0.1 child.com

プログラマーの進化プロセス: