JavaScript实现的双向跨域插件分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现的双向跨域插件分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3314字,纯文字阅读大概需要5分钟。
内容图文
![JavaScript实现的双向跨域插件分享](/upload/InfoBanner/zyjiaocheng/360/56ed3345fc2e4b018b35ab32f872787b.jpg)
由于浏览器(同源策略)限制,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实现的双向跨域插件分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。