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

程序猿的进化过程：