html5 window.postMessage

出于安全考虑，运行在同一浏览器中的框架、标签页、窗口间的通信都受到了严格的限制。通常，只有在协议(规则)、端口、主机完全相同的时候，也就是同源(origin)文档才可以通信，不同页面之间的脚本才能够相互访问。这个安全策略虽然防止恶意网站与其他内容交互，但是也让制作有多个数据来源的聚合应用(mashup)变得很困难。


为了满足这一需求，浏览器厂商和标准制定机构一直同意引入一种新功能：跨文档消息通信(Cross Document Messaging)。跨文档消息通信可以确保iframe、标签页、窗口间安全的进行跨源通信。window.postMessage 使跨源通信成为一种安全的方法。window.postMessage 通过安全可靠的方式实现了对这个限制的突破，很方便的实现了跨文档消息通信。跨文档消息通信是构建实时(real-time)跨源(cross-origin)通信的两个重要模块之一(另一个是XMLHttpRequest Level 2)。


源(origin)的概念：由规则(scheme)、主机(host)、端口构成(port)组成。由于规则不同(如https与http)，所以https://www.123.com与http://www.123.com的源是不同的。而源不考虑路径，http://www.123.com/default.html与http://www.123.com/index.html 是同源的。当然window.postMessage不仅仅可以在跨源(cross-origin)通信中使用，在同源通信中也可以使用。

例如：

域名为www.a.com中的按钮事件需要在www.b.com域名中的网站中弹出一个提示语，需要做一下操作：

在www.a.com中：

window.top.postMessage({

cmd : "openDialog",

id : "id",

url : "url"

option : {

title : "title",

width:"800px",

margin : "auto",

}

}, "*");

正如上述讲述的一样，postmessage中有两个参数，data和origin,data可以是一个字符串，也可以是一个对象，上述中是放了一个对象，这边需要的参数通过这个对象传了过去。

在www.b.com中：

window.addEventListener("message", function(event) {

var data = event.data;

if (data.cmd == "openDialog") {

//执行事件

} else {

}

}, false);

针对的是跨域名事件的传递。

若有疑问咨询QQ:1147726728