HTML5 postMessage

06-08

在HTML5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。

　　可以通過綁定window的message事件來監聽發送跨文檔消息傳輸內容。示例代碼如下：

eg.) parent page

Html代碼

<span style="font-size: small;"><!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="https://www.getit01.com/getimg_360.php?url=http://www.example.org/html5/postMessage/sub.html"></iframe>
</body>
</html>
</span>
<span style="font-size: small;">
</span>

<!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="https://www.getit01.com/getimg_360.php?url=http://www.example.org/html5/postMessage/sub.html"></iframe></body></html>

eg.) sob page

Html代碼

<span style="font-size: small;"><!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></span>
<span style="font-size: small;">
</span>

<!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/