HTML5
HTML5之window.postMessage API
window.postMessage是一个鲜为人知的HTML5 API。 window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲，window.postMessage是一个跨域的无服务器垫片的Ajax。让我们一起来看看window.postMessage的例子，以及如何在火狐，IE8+，Opera，Safari和Chrome浏览器中使用它
第一部分：发送者
程序的第一步是建立一个源，在这个源里面，我们将打开一个窗口（或者是iframe，如果你更喜欢的话），给另外新的窗口发送消息（因为是例子的缘故，我们将每6秒发送一次消息，同时并创建一个事件监听器监听我们收到的从目标窗口任何回应。）
| 代码如下 | 复制代码 |
//创建弹出窗口 //发送消息 //监听回复 //发送消息 //监听回复 | |
我使用是在IE中无法工作的window.addEventListener方法（IE中window.attachEvent方法）。你可以使用MooTools/jQuery/Dojo库中做了兼容处理的方法。
假设正确的打开了窗口，我们发送消息所指定的URI信息（包括协议，主机名和端口，如果存在的话），必须当时存在（因为用户可能已经改变的随后窗口的地址），如果这个目标窗口不存在，消息将无法发送。
我们还要创建了一个事件处理程序，用于接收消息。这是非常重要的，您必须验证事件起源当接收到一个消息，因为消息处理程序接受来自任何URI的消息！原点一旦通过验证，你可以在任何你喜欢的方式处理所接受到的消息。
使用iframe的时候如下：
| 代码如下 | 复制代码 |
//发送消息 //发送消息 | |
必须访问iframe的contentWindow属性——而不是节点本身。
第二部分：目标窗口
程序的第二部分是目标窗口的准备。目标窗口建立“message”事件的事件侦听器，同时应该验证信息的来源。同样的，消息事件接受从任何位置。所以建立一个信任源列表来验证消息源是很重要的。
| 代码如下 | 复制代码 |
//绑定消息事件 window.addEventListener('message',function(event) { if(event.origin !== 'http://www.php100.com') return; console.log('message received: ' + event.data,event); event.source.postMessage('holla back youngin!',event.origin); },false);//绑定消息事件 window.addEventListener('message',function(event) { if(event.origin !== 'http://www.hzhuti.com') return; console.log('message received: ' + event.data,event); event.source.postMessage('holla back youngin!',event.origin); },false); | |
上面的示例代码是目标窗口发送一个消息回应给发送方，确认消息已经收到了。这些事件属性十分重要：
source——发送消息的来源窗口或者iframe
origin——发送消息的URI（包括协议，域名和端口，如果有的话）
data——接受的消息内容
这三个属性对验证消息十分重要。
使用window.postMessage注意
像其他web技术一样，如果使用不当，就会很危险。如果没有验证消息源，它将威胁应用程序的安全。window.postmessage就像JavaScript式的PHP这方面的技术。window.postMessage很酷，不是吗？
话题作者
头衔:无
活跃成员
