Window.postMessage() HTML5 跨域解决方案

又是可恶的布吕马 , 有啥人死在了 讲出你晓得的布吕马软件系统，圣埃卢瓦？那个复试难题上。

那时和我们说说，HTML5 提供更多的两个布吕马软件系统，Window.postMessage ， 它足够多初学称心，会让你耳目一新。但常常绝大多数情形下，都不能让人始终笑下来，虽说魔高一丈魔高一丈，那个方式反之亦然也会被 HTTP 的许多协定所管制着，比如说 X-Frame-Options:SAMEORIGIN，但好在绝大多数情形下，情形不致那么差劲。上面步入自问自答：

Window.postMessage 提供更多了一类安全可靠的布吕马通信计划。

句法

句法分成两部份，发和收，只但都很单纯。

推送

otherWindow.postMessage( message , origin [ , transfer] )

* otherWindow

布吕马的 window 第一类的提及，比如说 iframe、window.open 建立的第一类等。

* message

推送给布吕马第一类的最新消息，能是 string、object、number等第一类

* origin

指定最新消息推送的域名，能使用通配符 *

接收

我们能监听 window 的 message 事件来获取到传递过来的值，例如：

window.addEventListener(message,receiveMessage,false);function receiveMessage(event){ // …}

接收到的event包含上面几个重要的属性：

* data

传递过来的信息。

* origin

推送最新消息的域名，包含了协定和端口（如https://developer.mozilla.org:443），通常情形下 默认端口会被省略，例如https://www.google.com意味着省略了端口443 ,http://www.google.com省略了端口 80。

* source

推送数据的window的提及，例如b域名收到a域名的最新消息，此时的source指的是a域名的window，你能通过它来实现双向通信。

举例

好了，终于能举个例子了，（等等我的糖炒板栗呢？）

示例页面

http://jsbin.com/wecoqi

示例代码：

http://jsbin.com/wecoqi/9/edit?html,js

http://jsbin.com/qetuwicebo/9/edit?html,js

代码解释

用户打开A页面，点击 Open Window 按钮，打开两个新的B页面（由于资源有限，Demo 中用同域作为演示）， 回到A页面点击 push message 按钮 ，推送你好到B页面，同时收到B页面的反馈。 这时候回到B页面，就能看到B页面的收到的最新消息了。

具体代码如下。

A页面

);var pushMessage = document.getElementById(push);var messageBox = document.getElementById(message);var newWin;//Open Window 按钮事件openWindow.addEventListener(click,function(){ //点击之后，打开两个新的窗口，并获得该窗口的提及 newWin = window.open(http://jsbin.com/qetuwicebo);})pushMessage.addEventListener(click,function(){ //点击推送最新消息按钮，推送你好到新打开的窗口 //注意第二参数是接收最新消息的域名，虽然能用*匹配所有的域名， //但在生产环境中，强烈建议写成真实的域名，以防不必要的攻击 newWin.postMessage(你好,*); // messageBox.innerHTML= messageBox.innerHTML+推送了最新消息“你好“，请移步新打开的页面查看收到的最新消息})//监听message事件，已接收其他页面发来的信息window.addEventListener(message,function(event){ messageBox.innerHTML= messageBox.inner

B页面

//监听message事件window.addEventListener(“message”, receiveMessage, false);function receiveMessage(event ){ //注意，在生产环境中，一定要验证event.origin，以避免潜在的安全可靠难题 var html=event.data: +event.data+<br>; html += event.origin: +event.origin+<br>; html += event.source: +event.source+<br>; d event.source.postMessage(hi,我来之新打开的页面，我收到你post的最新消息了,event.origin);}