跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

JavaScript实现的双向跨域插件分享_javascript技巧

由于浏览器(同源策略)限制,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立即学习“Java免费学习笔记(深入)

”;

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 = {使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更下载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

程序猿的进化过程:

相关文章