postMessage的使用及BUG
postMessage是html5的一个新功能,它是实现跨域通信的一种安全的策略,通过postMessage方式发送数据,通过在父子窗口添加onmessage事件进行监听,获取发送的数据,非常方便。
使用说明:
比如:在a.com向b.com发送数据。
a.com
/发送数据参数说明:**
otherWindow.postMessage(message, targetOrigin);
otherWindow:另一个的window对象的引用,这个引用可能是获取到的,如使用iframe元素的 contentWindow 属性,window.open返回的对象,或者根据名称或数字索引在window.frames中得到的对象。
message:发送到另一个窗口的数据。
targetOrigin:特别说明必须指定otherWindows要发送事件的来源,可以为文本字符串”“ (显示任意来源) 或者是一个URI。如果在事件被指定发送后, otherWindow文档的协议,主机名称,或端口号与targetOrigin提供的不相符的话,这个事件将不后被发送。只有当所有三个全部匹配后事件才会被发送。 这种机制提供消息发送到哪的控制权,例如,如果postMessage的被用来发送一个密码,这将是绝对关键的,参数是一个来源和打算接收包含密码消息的接收者一样的URI,以防止由恶意的第三方截取的密码。始终提供指定的targetOrigin,而不是,如果你知道其它window文档的地址,而没有提供一个具体的目标,将会泄露了您发送给任何有兴趣的恶意网站的数据。
b.com
//接收数据
window.addEventListener(“message”, receiveMessage, false);
function receiveMessage(event) {
if (event.origin == “http://a.com“) {
alert(event.data)
}
}
参数说明:
data**:**从其他窗口过来的数据对象。
origin**:**在postMessage 被调用时发送消息窗口的来源。
source:发送消息窗口的引用。
BUG
虽然从上面来看postMessage的使用非常方便,而且效率极高。但是针对IE8,9(当然IE6,7除外,因为不支持),postMessage只对iframe,frames有效,而对于不同窗口及tab页(window.opener),会报错Error: No such interface supported,网上资料说只有IE8会这样,但我这的IE9也如此。这位同样遇到问题的国外开发者提供了一个测试页面,大家可以帮助测试一下 test page。
作者对这种bug做了个兼容,当然仅限于子域,不同域的目前还没有找到合适的解决方案,如果大家有什么好办法可以提供一下(@woiweb),大家一起讨论下啊。
参数原文请参考:https://developer.mozilla.org/en-US/docs/DOM/window.postMessage