由於浏覽器（同源策略）限制，JavaScript 跨域的問題，一直是一個頗為棘手的問題。HTML5 提供了跨文檔消息傳輸的功能，在網頁文檔之間互相接收與發送信息。使用這個功能，不僅同源（域 + 端口號）的 Web 網頁之間可以互相通信，還可以在兩個不同域名之間實現跨域通信。
跨文檔消息傳輸Cross Document Messaging提供了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 插件，解決雙向跨域問題，實現不同網頁文檔之間的實時通信，可以在兩個不同域名之間實現跨域通信。
demo下載地址：http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar，版本v2
javascript跨域插件jcrossdomain.js
復制代碼 代碼如下:
(function (win){
/**
* 沒有開花的樹
* 2013/12/07 17:12
*/
var _jcd = {
isInited : false,
elmt : false,
hash : '',
delims : ',',
rand : function(){
return (new Date).getTime()
},
msg : function(){
alert('Warning: You must call init function at first');
},
init : function(callback, elmt){
if(_jcd.isInited == true)
return;
_jcd.isInited = true;
_jcd.elmt = elmt;
if(win.postMessage){
//浏覽器支持 HTML5 postMessage 方法
if(win.addEventListener){
//支持火狐、谷歌等浏覽器
win.addEventListener("message", 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 = function(data){
_jcd.elmt.postMessage(data, '*');
}
}else{
//浏覽器不支持 HTML5 postMessage 方法，如IE6、7
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 = {
initParent : 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;
})(window);
父網頁中調用方法：
復制代碼 代碼如下:
//自定義回調函數
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');
模擬測試小提示：
為了實現不同域之間的通信，可以在操作系統的 hosts 文件添加兩個域名，進行模擬。
hosts 文件中添加兩個不同的域名
127.0.0.1 parent.com
127.0.0.1 child.com
程序猿的進化過程：
