JavaScript实现的双向跨域插件分享_Javascript教程-查字典教程网
JavaScript实现的双向跨域插件分享
JavaScript实现的双向跨域插件分享
发布时间:2016-12-30 来源:查字典编辑
摘要:由于浏览器(同源策略)限制,JavaScript跨域的问题,一直是一个颇为棘手的问题。HTML5提供了跨文档消息传输的功能,在网页文档之间互...

由于浏览器(同源策略)限制,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

程序猿的进化过程:

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类