“跨域了,实现不了。”
“跨协议了,实现不了。”
“两边端口不一致,不能相互访问。”
……

这些字眼您是不是经常发生在你的身上,跨域一直是前端开发人员纠结的事情,好在HTML5提供的postMessage接口给前端人员提供了完美的解决方案。不过可恨的IE还得用猥琐的iframe代理来实现跨域操作。接下来讲解如何实现不同浏览器之前的跨域通信。


1)postMessage接口说明

windowHandler.postMessage(message,  targetOrigin)

postMessage处于window对象下

message:需要发送的信息,可以除function外的另一数据(测试的时候发现function对象无法透传)。

targetOrigin:需要访问的目标域名

2)在父级页面调用

/**
 * 从子页面发起,父页面接收消息时的回调函数
 */
window["notifyReset"] = {
    handler : function(e, data){ // 父页面
        var height = data.result;
        window.adjustHeight(height,document,async_msg.ifr);
        return "notifyReset";
    },
    args : []
};

/**
 * 从子页面发起,父页面接收消息时的回调函数
 */
window["notifyMainPck"] = {
    handler : function(e, data){ // 父页面		
        //调用的方法的参数必须处于window对象的作用域可访问的范围内
        window.adjustHeight(data.result,document,async_msg.ifr); 
        return "notifyMainPck";
    },
    args : []
};
YUI().use("crossor", function(Y){
    var ifr = document.getElementById("app");      
    var sendMessage = function(){
        var crossor = Y.Crossor;
        crossor.listen();          
        crossor.postMessage({
            source : ifm.contentWindow,
            origin : o.domain,

            "package" : {	
                pckName : "notifySubPck",
                response : true,

                    "package" : {
                    pckName : "notifyMainPck",
                    response : false
                }
            }
        })
    }      
    ifr.onload = sendMessage;

    ifr.src =  "http://cd.tenpay.com/app.html";
})

3)iframe页面调用

YUI().use("crossor", function(Y){        
  var crossor = Y.Crossor;
  crossor.listen();

  /**
   * 此次为强制使用iframe跨域,如果不支持postMesage接口,在这里调用
   */
  if(!("postMessage" in window)){
      crossor.postMessage({proxy:{
          domain : "dev.tenpay.com",
          path : "/proxy.html",
          port : 80,
          secure : false,
          id : "test",
          data : "height=" + document.documentElement.offsetHeight
      }}, crossor.FIRE.IFRAME);
  }
})

4) proxy页面实现

YUI().use("until", function(Y){        
  var id = Y.until.url.getPara("crossor_id");
  var height = Y.until.url.getPara("height");
  top.document.getElementById("app").height = height;
})

5) 接口实现方案