HTML5 的message的使用

最新推荐文章于 2021-06-20 04:00:27 发布

tyust512

最新推荐文章于 2021-06-20 04:00:27 发布

阅读量2.9k

点赞数

分类专栏： Html

Html 专栏收录该内容

12 篇文章

订阅专栏

HTML5接口中的postMessage()和onmessageAPI
比如WebWorkers,js提供了多线程的功能,它实现多线程间JavaScript调用的功能
Cross-document messaging, 实现了两个不同域间JavaScript调用
WebSockets, Server-Sent Event

原文地址

WebWorker

//WebWorker为前端网页提供了在后台中运行的方法.WebWorker可以通过postMessage向任务池发送任务请求, 执行完以后再通过postMessage返回消息.
//我们可以通过onmessage进行捕捉. 后台进程不能对DOM 操作,不能进行堵塞操作(alert); 只能再onmessage的回调函数进行操作DOM

//在主线程里, 创建Worker,并设置message监听.
function workerTest()
{
    var worker = new Worker('test.js');

    //event.data 可以接收子线程中返回的数据
    worker.onmessage = function(event)
    {
        //显示出来
        document.body.innerHTML += event.data;
    }
}

//test.js中的代码, 这是子线程
function add()
{
    for (var index = 0; index<20; index++)
    {

    }

    //向主线程发送消息
    postMessage(index);
}

Cross-document messaging

//它可以实现网页之间的跨域通讯.
// 1. 我们需要获取网页所在的窗口对象的实例.
// 2. 其他窗口可以通过postMessage传递数据到接收数据的窗口
// 3.接收数据的窗口可以通过onmessage进行监听

添加模拟host

为了模拟不同域之间的通信,我们需要在hosts文件中添加2个域名, 进行模拟.

127.0.0.1  parent.com
127.0.0.1  child.com

模拟页面

父页面
//在父页面中嵌套iframe嵌入子页面, 并通过postMessage发送数据到子窗口

<iframe src="//child.com:8080/TestHTML5/other-domain.html" id="childPage"></iframe>

<input type="text" id="message" />
<input type="button" value="Send message to child.com" onclick="sendMessage()" />

<script>
    function sendMessage()
    {
        //postMessage第一个参数是 发送的消息文本, 第二个是接收信息窗口的url地址
        document.getElementById("childPage").contentWindow
            .postMessage(document.getElementById("message").value, 'http://child.com:8080');
    }

</script>

子页面

//在子窗口中监听message事件,显示父窗口发过来的数据
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Web page from child.com</title>
        <script type="text/JavaScript">
            //event 参数中有 data 属性，就是父窗口发送过来的数据
            window.addEventListener("message", function(event)
            {
                // 把父窗口发送过来的数据显示在子窗口中
                document.getElementById("content").innerHTML+=event.data+"<br/>";
            },
            false);

        </script>
    </head>
    <body>
        Web page from http://child.com:8080

        <div id="content"></div>
    </body>
</html>

WebSocket

WebSocket技术可以让后台随时向前端推送消息。
##后端
WebSockets 服务器端有 jetty 提供的基于 Java 的实现，有 WebSocket-Node 基于 node.js 的实现。本文将使用 WebSocket-Node 提供的示例代码，稍作修改作为 WebSockets 的服务器端。关于 node.js 的介绍以及使用请关于 WebSocket-Node 的使用请参考 WebSocket-Node。
##前端

WebSockets需要前台和后台的双向支持. 后端我们
在前端的WebSockets 中可以使用 send 和 onmessage

由于文本主要介绍 postMessage(send) 和 onmessage 客户端 API 的应用，而 WebSockets 涉及到服务器端代码的实现，所以本文将选取最简单的服务器端框架来编写服务器代码。

Server-Sent Events

允许您从服务器 push 实时数据到浏览器, 他需要后台的支持。
使用 Eventsource 可以处理与页面间的接收和发送数据。

Server-Sent Events 和 WebSockets 有相同之处，WebSockets 实现了服务器端以及客户端的双向通信功能，而 Server-Sent Events 则仅是指服务器端到客户端的单向通信，

前端

由于是服务器端到客户端的单向通信，所以在 Server-Sent Events 中没有 postMessage 方法。
首先，在客户端通过 JavaScript 代码 new 一个 EventSource 实例出来，参数是实现 EventSource 服务器端 URL 地址。然后在这个实例上监听 onmessage 事件接收服务器端发送过来的数据。

if (window.EventSource)
{
    // 创建 EventSource 实例，传入 server 地址
    var source = new EventSource('/TestHTML5/ServerSentEvent');
}
else
{
    console.log("Your browser doesn't support server-sent event");
}

// 监听 message 事件，等待接收服务器端发送过来的数据
source.addEventListener('message', function(event)
{
    console.log(event.data);
}, false);

//EventSource 还提供了 onopen 以及 onerror 事件
source.addEventListener('open', function(event)
{
}, false);

source.addEventListener('error', function(event)
{
    if (event.readyState == EventSource.CLOSED)
    {
    }
}, false);