HTML5 postMessage

HTML5 知识库

阅读:829次评论:0条更新时间:2011-07-01

HTML5 postMessage

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

此文章带有附件,请前往http://tiger-passion.iteye.com/blog/1111395下载

Html5.0 | Great HTML5 Example

评论共 0 条请登录后发表评论