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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
javascript测试题练习代码
Oct 10 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP产生随机字符串函数
2006/12/06 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
初学Javascript的一些总结
2008/11/03 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
小程序转发探索示例
2019/02/19 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
js中实现继承的五种方法
2021/01/25 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
大学生职业生涯规划范文
2014/01/08 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
党支部承诺书范文
2014/03/28 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
实习证明格式范文
2014/10/14 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
赞美教师的句子
2019/09/02 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸