window.postMessage

最新推荐文章于 2025-03-10 15:34:42 发布

最新推荐文章于 2025-03-10 15:34:42 发布 · 128 阅读

文章标签：

#html5 #postMessage

html5 专栏收录该内容

74 篇文章

订阅专栏

本文介绍了 HTML5 中 postMessage 接口的基本用法及其在跨文档消息传输中的应用。postMessage 支持 IE8、Firefox3、Opera9、Chrome3 和 Safari4 等浏览器，并可通过绑定 window 的 message 事件来监听跨文档的消息传输。

只是做一些简单的知识积累，初探！

HTML5标准下的postMessage

postMessage可以实现跨文档消息传输（Cross Document Messageing）.
IE 8,FF3,Opera9,Chrome 3和Safari4多支持
可以通过绑定window的message事件来监听发生跨文档消息传输内容
也可以在同源策略中使用
可以根据Event.origin属性来过来不合法的域名传输的数据

document B

/*
绑定事件
*/
if(typeof window.addEventListener != 'undefined'){
     //非ie
     window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    //ie
     window.attachEvent('onmessage',onmessage);
}

function onmessage(e){
     console.log(e.data); //e.data---信息  e.origin---跨域传的源
}

document A

/*
父页面内嵌iframe
找到一个iframe
*/

var  o = document.getElementsByTagName('iframe')[0];
       o.contentWindow.postMessage('Hello','parant');

postMessage的参数

message ----传递过来的信息
targetOrigin ----
transfe

扩展阅读

http://www.whatwg.org/specs/web-apps/current-work/#dom-window-postmessage

http://austinchau.blogspot.com/

http://html5demos.com/