前端跨域问题及解决方案(3)

如果是与iframe通信的场景就需要把iframe的src设置成当前域的一个页面地址。

3.3、通过 window.postMessage 跨域

HTML5 为了解决这个问题，引入了一个全新的 API：跨文档通信 API（Cross-document messaging）。这个 API 为 window 对象新增了一个 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage 的兼容性如下：

可以看到 Internet Explorer 8 , chrome，Firefox , Opera 和 Safari 都将支持这个功能。但是 Internet Explorer 8 和 9 以及 Firefox 6.0 和更低版本仅支持字符串作为 postMessage 的消息。
var popup = window.open("http://bbb.com", "title");//父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法。popup.postMessage("Hello World!", "http://bbb.com");
postMessage 方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即 协议 域名 端口。也可以设为 *，表示不限制域名，向所有窗口发送。
父窗口和子窗口都可以通过 message 事件，监听对方的消息。message 事件的事件对象 event，提供以下三个属性：
1、event.source：发送消息的窗口。 2、event.origin： 消息发向的网址。 3、event.data：消息内容。
一个例子：
var onmessage = function (event) { var data = event.data;//消息 var origin = event.origin;//消息来源地址 var source = event.source;//源Window对象 if(origin == "http://www.aaa.com"){ console.log(data);//hello world! } source.postMessage("Nice to see you!", "*"); }; if (typeof window.addEventListener != "undefined") { window.addEventListener("message", onmessage, false); } else if (typeof window.attachEvent != "undefined") { //ie window.attachEvent("onmessage", onmessage); }