由于瀏覽器（同源策略）限制，JavaScript 跨域的問題，一直是一個(gè)頗為棘手的問題。HTML5 提供了跨文檔消息傳輸?shù)墓δ?，在網(wǎng)頁文檔之間互相接收與發(fā)送信息。使用這個(gè)功能，不僅同源（域 + 端口號(hào)）的 Web 網(wǎng)頁之間可以互相通信，還可以在兩個(gè)不同域名之間實(shí)現(xiàn)跨域通信。
跨文檔消息傳輸Cross Document Messaging提供了postMessage方法在不同網(wǎng)頁文檔之間互相傳遞數(shù)據(jù)，支持實(shí)時(shí)消息傳遞?，F(xiàn)在很多瀏覽器都將支持這個(gè)功能，比如Google Chrome 2.0+、Internet Explorer 8.0+、Firefox 3.0+、Opera 9.6+、Safari 4.0+等
那么，IE6、IE7等不支持 HTML5的瀏覽器怎么辦？
可以使用window.name方法，因?yàn)閣indow.name的修改不涉及跨域問題，雖然使用起來不是特別理想，但效果還可以接受。
但是，我們總不能每次涉及到跨域都去寫一遍window.postMessage、window.addEventListener、window.name等等這些內(nèi)容吧。
為此，我把這整個(gè)跨域過程抽象出來，封裝成一個(gè)JavaScript 插件，解決雙向跨域問題，實(shí)現(xiàn)不同網(wǎng)頁文檔之間的實(shí)時(shí)通信，可以在兩個(gè)不同域名之間實(shí)現(xiàn)跨域通信。
demo下載地址：http://xiazai.VeVB.COm/201501/other/jcrossdomain_v2.rar，版本v2
javascript跨域插件jcrossdomain.js
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);
父網(wǎng)頁中調(diào)用方法：
//初始化，載入回調(diào)函數(shù)和 iframe 的id
jCrossDomain.initParent(cb, 'iframeA');
//發(fā)消息
jCrossDomain.sendMessage('hello, child');
子網(wǎng)頁中調(diào)用方法：
//初始化，載入回調(diào)函數(shù)
jCrossDomain.initChild(cb);
//發(fā)消息
jCrossDomain.sendMessage('hello, parent');
模擬測試小提示：
為了實(shí)現(xiàn)不同域之間的通信，可以在操作系統(tǒng)的 hosts 文件添加兩個(gè)域名，進(jìn)行模擬。
hosts 文件中添加兩個(gè)不同的域名
127.0.0.1 parent.com
127.0.0.1 child.com
程序猿的進(jìn)化過程：
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
