ブラウザ(同じオリジンポリシー)の制限により、JavaScriptのクロスドメインの問題は常に非常に困難な問題でした。 HTML5は、クロスドキュメントメッセージ送信の機能を提供し、Webドキュメント間で情報を受信して送信します。この関数を使用して、同じオリジン(ドメイン +ポート番号)を持つWebページが互いに通信できるだけでなく、2つの異なるドメイン名間のクロスドメイン通信もできます。
クロスドキュメントメッセージングクロスドキュメントメッセージングは、リアルタイムメッセージングをサポートするさまざまなWebドキュメント間でデータを渡すポストメサージメソッドを提供します。 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.vevb.com/201501/other/jcrossdomain_v2.rar、バージョンV2
JavaScriptクロスドメインプラグインJCrossDomain.js
コードコピーは次のとおりです。
(function(win){
/**
*花はありません
* 2013/12/07 17:12
*/
var _jcd = {
isinited:false、
elmt:false、
ハッシュ: ''、
デリム: '、'、
rand:function(){
return(new Date).getTime()
}、
msg:function(){
アラート( '警告:最初にinit関数を呼び出す必要があります');
}、
init:function(callback、elmt){
if(_jcd.isinited == true)
戻る;
_jcd.isinited = true;
_jcd.elmt = elmt;
if(win.postmessage){
//ブラウザはHTML5ポストメッサージメソッドをサポートしています
if(win.addeventlistener){
// Firefox、Googleなどのブラウザをサポートしています。
win.addeventlistener( "message"、function(ev){
callback.call(win、ev.data);
}、間違い);
} else if(win.attachevent){
// IEブラウザをサポートします
win.attachevent( "onmessage"、function(ev){
callback.call(win、ev.data);
});
}
_jcd.msg = function(data){
_jcd.elmt.postmessage(data、 '*');
}
}それ以外{
//ブラウザは、IE6や7などのHTML5ポストメッサージメソッドをサポートしていません
setInterval(function(){
if(win.name!== _jcd.hash){
_jcd.hash = win.name;
callback.call(win、_jcd.hash.split(_jcd.delims)[1]);
}
}、50);
_jcd.msg = function(data){
_jcd.elmt.name = _jcd.rand() + _jcd.delims + data;
}
}
}
};
var jcd = {
interparent:function(callback、iframeid){
_jcd.init(callback、document.getElementbyid(iframeid).contentwindow);
}、
initchild:function(callback){
_jcd.init(callback、win.parent);
}、
sendmessage:function(data){
_jcd.msg(data);
}
};
win.jcrossdomain = jcd;
})(ウィンドウ);
親ページでメソッドを呼び出す:
コードコピーは次のとおりです。
//カスタムコールバック関数
var cb = function(msg){
alert( "get msg:" + msg);
};
//初期化、コールバック関数をロードし、iframe id
jcrossdomain.initparent(cb、 'iframea');
//メッセージを送信します
jcrossdomain.sendmessage( 'hello、child');
サブページでメソッドを呼び出す:
コードコピーは次のとおりです。
//カスタムコールバック関数
var cb = function(msg){
alert( "get msg:" + msg);
};
//初期化、コールバック関数をロードします
jcrossdomain.initchild(cb);
//メッセージを送信します
jcrossdomain.sendmessage( 'hello、parent');
シミュレーションテストのヒント:
異なるドメイン間の通信を実現するために、シミュレーションのためにオペレーティングシステムのホストファイルに2つのドメイン名を追加できます。
ホストファイルに2つの異なるドメイン名を追加します
127.0.0.1 Parent.com
127.0.0.1 child.com
プログラマーの進化: