HTML5学习之Communication API

Communication,顾名思义,是交流,是通信。在HTML5的页面,框架之间通信中,Communication API扮演着非常重要的作用。

既然是交流,必然有发送和接收2个过程。

在Communication API中,可以使用postMessage方法进行发送数据。接收的话只要监听一个名为messge的事件就可以了。

下面是一个例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5 页面发送信息测试</title>
    <script>
        function load(){
            var postBtn=document.getElementById("postMessage");
            postBtn.addEventListener("click",post,true);
        }
        function post(){
            var frame=document.getElementById("frame").contentWindow;
            frame.postMessage("hello world","*");
        }
    </script>
</head>
<body onload="load()">
<h2>html5 页面发送信息测试</h2>
<iframe id="frame" src="communication2.html"></iframe>

<button id="postMessage">发送信息</button>
</body>
</html>

在上述代码中,我们向id为frame的iframe发送了消息,那么communication2.html是如何接收呢?
上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>html5 页面发送信息测试-接收端</title>
    <script>
        function load(){
            window.addEventListener("message",getMessage,true);
        }
        function getMessage(e){
            var message=document.getElementById("messageText");
            message.innerHTML="源:"+e.origin+"<br/>内容:"+e.data;
        }
    </script>
</head>
<body onload="load()">
<h2>html5 页面发送信息测试-接收端</h2>
<p id="messageText"></p>
</body>
</html>

使用addEventListener监听message事件,当有消息,就会执行getMessage回调。

就是这么简单!

标签: none

添加新评论