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){
          //支援火狐、Google等瀏覽器
          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

程式猿的演化過程：