在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解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
本篇将重点讲解如何利用HTML5的`postMessage`和`iframe`技术来实现文件的跨域异步上传。 `postMessage`是HTML5中一种强大的通信机制，它允许来自不同源的脚本采用异步方式进行有限的通信，可以解决同源策略带来的...
【Html5 postMessage实现跨域消息传递】 在Web开发中，由于浏览器的同源策略，不同源的网页之间无法直接通信，这限制了开发者在处理跨域数据交换时的灵活性。同源策略是为了保障Web安全而设定的一项核心规则，防止...
HTML5的`postMessage` API是现代Web开发中一个重要的跨窗口通信机制，它允许不同源的脚本之间安全地传递消息，有效地解决了浏览器的安全限制，尤其是跨域问题。在这个场景下，`postMessage`成为了实现消息跨域推送的...
HTML5的`postMessage` API是为了解决Web应用程序之间的跨域通信问题而引入的。在传统的Web开发中，由于浏览器的同源策略限制，不同源的页面无法直接交互，但`postMessage`提供了一种安全的方式，允许来自不同源的...
用于有效跨域通信的 HTML5 PostMessage 库。 特征 轻的 回拨支持 活动支持 双向通信 基于 JSON-RPC 2.0 标准 两端代码相同 应用程序接口 hhConnect（选项） 初始化与窗口对象的新连接（可以是 iFrame 或弹出窗口）...
`postMessage`是HTML5引入的一个特性，用于在不同源的窗口之间发送和接收消息。它提供了一种安全的方式来实现跨窗口数据传递，避免了传统方式（如通过URL查询字符串或修改全局变量）可能导致的安全问题。`post...
HTML5的`window.postMessage`是解决跨域通信问题的一个重要机制。在Web开发中，由于浏览器的安全策略，不同源的页面之间默认不允许进行数据交互，但`postMessage`提供了一种安全的方式，允许来自不同源的脚本采用...
HTML5的`postMessage` API是前端实现跨域通信的重要工具，它允许不同源的脚本采用异步方式进行有限的通信，打破了浏览器的同源策略限制。`postMessage`方法适用于处理如iframe、window.open创建的新窗口、或者通过...
HTML5引入了一种新的API，即`postMessage`，它为跨域和跨窗口的数据传递提供了解决方案，同时也被用于Web Workers之间的通信。本文将深入探讨`postMessage`的工作原理，以及如何利用它来实现iframe跨域传递数据。 #...
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个...
练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...
`postMessage` API是实现这一功能的关键，为了解决传统`iframe`跨域限制的问题，提供了一种安全且灵活的方法。本文将深入探讨`iframe`跨域通信与`postMessage`的使用方法和应用场景。 首先，我们需要明白什么是跨域...
2. **创建Ajax请求**：使用JavaScript的XMLHttpRequest对象，构建请求URL，设置请求方法（通常是GET或POST），并发送数据（如输入框的值）到服务器。 3. **STRUTS框架处理**：在STRUTS框架的Action类中，接收并处理...
1. `postMessage`：这是HTML5引入的一个特性，用于实现跨文档消息传递。通过`window.postMessage`方法，一个窗口可以向任何其他窗口发送消息，无论它们是否属于同一个源。接收端需要监听`message`事件来接收到的消息...