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


Posted in Javascript onJanuary 31, 2015

由于浏览器(同源策略)限制,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.3water.com/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 相关文章推荐
javascript中String类的subString()方法和slice()方法
May 24 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
实例浅析js的this
Dec 11 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
解析vue中的$mount
Dec 21 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 #Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 #Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 #Javascript
jQuery知识点整理
Jan 30 #Javascript
浅谈jquery回调函数callback的使用
Jan 30 #Javascript
jQuery修改class属性和CSS样式整理
Jan 30 #Javascript
javascript中AJAX用法实例分析
Jan 30 #Javascript
You might like
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Python类class参数self原理解析
2020/11/19 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
Prototype如何更新局部页面
2013/03/03 面试题
少先队学雷锋活动月总结
2014/03/09 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
企业工会工作总结2015
2015/05/13 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server