由於瀏覽器(同源策略)限制,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
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);
父網頁中呼叫方法:
//初始化,載入回呼函數和 iframe 的id
jCrossDomain.initParent(cb, 'iframeA');
//傳訊息
jCrossDomain.sendMessage('hello, child');
子網頁中呼叫方法:
//初始化,載入回呼函數
jCrossDomain.initChild(cb);
//傳訊息
jCrossDomain.sendMessage('hello, parent');
模擬測驗小提示:
為了實現不同域之間的通信,可以在作業系統的 hosts 檔案中添加兩個域名,進行模擬。
hosts 檔案中新增兩個不同的網域名稱
127.0.0.1 parent.com
127.0.0.1 child.com
程式猿的演化過程: