JavaScript實現的雙向跨域插件分享
由于瀏覽器(同源策略)限制,JavaScript 跨域的問題,一直是一個頗為棘手的問題。HTML5 提供了跨文檔消息傳輸的功能,在網頁文檔之間互相接收與發(fā)送信息。使用這個功能,不僅同源(域 + 端口號)的 Web 網頁之間可以互相通信,還可以在兩個不同域名之間實現跨域通信。
跨文檔消息傳輸Cross Document Messaging提供了postMessage方法在不同網頁文檔之間互相傳遞數據,支持實時消息傳遞?,F在很多瀏覽器都將支持這個功能,比如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');
//發(fā)消息
jCrossDomain.sendMessage('hello, child');
子網頁中調用方法:
//自定義回調函數
var cb = function(msg){
alert("get msg:" + msg);
};
//初始化,載入回調函數
jCrossDomain.initChild(cb);
//發(fā)消息
jCrossDomain.sendMessage('hello, parent');
模擬測試小提示:
為了實現不同域之間的通信,可以在操作系統的 hosts 文件添加兩個域名,進行模擬。
hosts 文件中添加兩個不同的域名
127.0.0.1 parent.com
127.0.0.1 child.com
程序猿的進化過程:
- AJAX javascript的跨域訪問執(zhí)行
- javascript使用window.name解決跨域問題
- Javascript 跨域訪問解決方案
- javascript跨域刷新實現代碼
- Javascript跨域請求的4種解決方式
- 使用JavaScript 實現各種跨域的方法
- javascript跨域的4種方法和原理詳解
- JavaScript使用HTML5的window.postMessage實現跨域通信例子
- JavaScript兩種跨域技術全面介紹
- 關于JavaScript跨域問題及實時刷新解決方案
- JavaScript中跨域調用Flash的方法
- JavaScript跨域方法匯總
- javascript跨域原因以及解決方案分享
相關文章
Bootstrap modal使用及點擊外部不消失的解決方法
這篇文章主要為大家詳細介紹了Bootstrap modal使用及點擊外部不消失的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12document.getElementById的一些細節(jié)
document.getElementById的一些細節(jié)...2006-09-09