JavaScript實(shí)現(xiàn)的雙向跨域插件分享
由于瀏覽器(同源策略)限制,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.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);
父網(wǎng)頁中調(diào)用方法:
//自定義回調(diào)函數(shù)
var cb = function(msg){
alert("get msg:" + msg);
};
//初始化,載入回調(diào)函數(shù)和 iframe 的id
jCrossDomain.initParent(cb, 'iframeA');
//發(fā)消息
jCrossDomain.sendMessage('hello, child');
子網(wǎng)頁中調(diào)用方法:
//自定義回調(diào)函數(shù)
var cb = function(msg){
alert("get msg:" + msg);
};
//初始化,載入回調(diào)函數(shù)
jCrossDomain.initChild(cb);
//發(fā)消息
jCrossDomain.sendMessage('hello, parent');
模擬測(cè)試小提示:
為了實(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)化過程:
- AJAX javascript的跨域訪問執(zhí)行
- javascript使用window.name解決跨域問題
- Javascript 跨域訪問解決方案
- javascript跨域刷新實(shí)現(xiàn)代碼
- Javascript跨域請(qǐng)求的4種解決方式
- 使用JavaScript 實(shí)現(xiàn)各種跨域的方法
- javascript跨域的4種方法和原理詳解
- JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子
- JavaScript兩種跨域技術(shù)全面介紹
- 關(guān)于JavaScript跨域問題及實(shí)時(shí)刷新解決方案
- JavaScript中跨域調(diào)用Flash的方法
- JavaScript跨域方法匯總
- javascript跨域原因以及解決方案分享
相關(guān)文章
小程序云開發(fā)獲取不到數(shù)據(jù)庫記錄的解決方法
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)獲取不到數(shù)據(jù)庫記錄的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05JavaScript 原型繼承之構(gòu)造函數(shù)繼承
JavaScript 是基于原型的面向?qū)ο笳Z言。也就是說,每個(gè)實(shí)例對(duì)象都具有一個(gè)原型。對(duì)象從該原型中繼承屬性和方法。這一篇將具體說說構(gòu)造函數(shù)的繼承。2011-08-08layui表格checkbox選擇全選樣式及功能的實(shí)例
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03Bootstrap modal使用及點(diǎn)擊外部不消失的解決方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap modal使用及點(diǎn)擊外部不消失的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12document.getElementById的一些細(xì)節(jié)
document.getElementById的一些細(xì)節(jié)...2006-09-09原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05js 模擬實(shí)現(xiàn)類似c#下的hashtable的簡單功能代碼
越來越感覺js對(duì)集合的處理沒有c#強(qiáng)大。比如在實(shí)際開發(fā)中,經(jīng)常用到在一維數(shù)組或者二維數(shù)組里取某一個(gè)滿足某些條件的項(xiàng),通常的處理方式就是遍歷數(shù)組,對(duì)比條件,匹配就取出,然后結(jié)束循環(huán)。2010-01-01