在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document
Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari
4都支持postMessage。
可以通过绑定window的message事件来监听发送跨文档消息传输内容。示例代码如下：
eg.) parent page
<!DOCTYPE HTML>
<html>
<head>
<title>Communication</title>
<script>
var messageChange = function(e) {
var data = e.data;
var origin = e.origin;
if (origin !== "http://www.example.org") return;
document.getElementById('display').innerHTML = data;
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', messageChange, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', messageChange);
}
</script>
</head>
<body>
<div id="display">Say something!</div>
<iframe scrolling="no" frameborder="0" width="0" height="0" src="http://www.example.org/html5/postMessage/sub.html"></iframe>
</body>
</html>
eg.) sob page
<!DOCTYPE HTML>
<html>
<head>
<title>Communication</title>
<script>
setInterval(function(){
window.parent.postMessage("hello world!", "http://www.example.org");
},1000);
</script>
</head>
<body></body>
</html>
DEMO见附件，
更多HTML5相关demo地址：http://html5demos.com/
分享到：
相关推荐
HTML5 postMessage+iframe实现文件跨域异步上传 http://blog.csdn.net/jiangsyace/article/details/43858443
本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 postMessage(data,origin)方法接受两个参数 1.data:要传递的数据，html5规范中提到该参数可以是Jav
主要介绍了Html5 postMessage实现跨域消息传递的相关资料,需要的朋友可以参考下
html5 postMessage解决跨域、跨窗口消息传递 这也是html5另一个API——web workers传递消息的方法
主要介绍了html5 postMessage前端跨域并前端监听的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5 API postMessage 实现消息跨域推送
用于有效跨域通信的 HTML5 PostMessage 库。 特征 轻的 回拨支持 活动支持 双向通信 基于 JSON-RPC 2.0 标准 两端代码相同 应用程序接口 hhConnect（选项） 初始化与窗口对象的新连接（可以是 iFrame 或弹出窗口）...
html5 API postMessage跨域详解.pdf
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个...
练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...
NULL 博文链接：https://weistar.iteye.com/blog/1845314
本文介绍了Ajax技术的原理及特点，并对采用STRUTS框架的Web应用中如何使用Ajax技术，通过异步数据交互的方式实现文本框输入渐进提示功能的方法进行了说明
2. 目前最灵活的接入方案，基于Html5 postMessage传送blob数据，高度解耦 3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js...
针对这些令人头疼的跨域问题，html5特地推出新功能–postMessage(跨文档消息传输)。postMessage在使用时，需要传入2个参数，data和originUrl。data是指需要传递的内容，但是部分浏览器只能处理字符串参数，所以我们...
window.postMessage经常被人们利用来做跨域数据传递,下面将为大家来介绍HTML5中的postMessage API基本使用教程,需要的朋友可以参考下