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

 更新时间:2015年01月31日 10:09:20   投稿:junjie  
这篇文章主要介绍了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

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

程序猿的进化过程:

相关文章

  • 手把手15分钟搭一个企业级脚手架

    手把手15分钟搭一个企业级脚手架

    这篇文章主要介绍了手把手15分钟搭一个企业级脚手架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JavaScript仿小米官网注册登录功能的实现

    JavaScript仿小米官网注册登录功能的实现

    这篇文章主要为大家详细介绍了如何通过JavaScript实现仿小米官网登录注册完整功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • array.prototype.silce.call 理解分析

    array.prototype.silce.call 理解分析

    在很多框架中与遇到这个方法,但一时没去研究这个方法,只要前段时间被问到,尴尬无奈收场。所以学习就要追根究底的精神,废话少说,说正题。
    2010-04-04
  • JS网页播放声音实现代码兼容各种浏览器

    JS网页播放声音实现代码兼容各种浏览器

    JS网页播放声音有多种方法可以实现,不过兼容各种浏览器的就没有几个了,不过本文的这个示例或许对大家有所帮助
    2013-09-09
  • JavaScript通过改变文字透明度实现的文字闪烁效果实例

    JavaScript通过改变文字透明度实现的文字闪烁效果实例

    这篇文章主要介绍了JavaScript通过改变文字透明度实现的文字闪烁效果,结合完整实例形式分析了javascript基于定时器周期性动态修改页面元素属性的相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • JS获取当前时间的年月日时分秒及时间的格式化的方法

    JS获取当前时间的年月日时分秒及时间的格式化的方法

    这篇文章主要介绍了js获取当前时间的年月日时分秒及时间的格式化,本文通过实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 使用Map处理Dom节点的方法详解

    使用Map处理Dom节点的方法详解

    本文浅析一下为什么Map(和WeakMap)在处理大量DOM节点时特别有用,文中的代码示例介绍的非常详细,感兴趣的小伙伴可以借鉴阅读
    2023-05-05
  • js实现图片360度旋转

    js实现图片360度旋转

    本文主要介绍了js实现图片360度旋转的思路与方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 扩展String功能方法

    扩展String功能方法

    扩展String功能方法...
    2006-09-09
  • 原生javascript单例模式的应用实例分析

    原生javascript单例模式的应用实例分析

    这篇文章主要介绍了原生javascript单例模式的应用,结合实例形式分析了JavaScript单例模式的基本功能、原理、应用及操作注意事项,需要的朋友可以参考下
    2020-02-02

最新评论