浅谈HTML5 postMessage

来源：互联网发布：org.apache.struts2 编辑：程序博客网时间：2024/05/28 15:07

Web Workers

简介

至 2008 年 W3C 制定出第一个 HTML5 草案开始，HTML5 承载了越来越多崭新的特性和功能。它不但强化了 Web 系统或网页的表现性能，而且还增加了对本地数据库等 Web 应用功能的支持。其中，最重要的一个便是对多线程的支持。在 HTML5 中提出了工作线程（Web Workers）的概念，并且规范出 Web Workers 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。Web Workers 允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers 就可以通过 postMessage 向任务池发送任务请求，执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。Web Workers 进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用 XMLHttpRequest 来处理 I/O，但通常，后台进程（包括 Web Workers 进程）不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM，只能通过返回消息给创建者的回调函数进行处理。

简单地讲，web worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

http://www.w3school.com.cn/html5/html_5_webworkers.asp

postMessage API

postMessage 主要包含两个 API：1).消息监听：onmessage2).消息发送：postMessage

介绍

这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为”*”，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”。

可以解决的问题

1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递

1.监听发送过来的消息：

window.addEventListener('message',onMessage,false);var onMessage = function(e){    console.log(e,e.data);    if(e.origin != "http://..."){        return false;    }    //消息处理

2.向其他窗体发送消息

window.frames[0].postMessage('getcolor','http://...');

function(e) e的重要属性

data：顾名思义，是传递来的messagesource：发送消息的窗口对象origin：发送消息窗口的源（协议+主机+端口号）

实例代码

主窗口

<!DOCTYPE html><html><head><title>Post Message</title></head><body><div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">    <div id="color">Frame Color</div></div><div>    <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe></div><script type="text/javascript">    window.onload=function(){        window.frames[0].postMessage('getcolor','http://lslib.com');    }    window.addEventListener('message',function(e){        var color=e.data;        document.getElementById('color').style.backgroundColor=color;    },false);</script></body></html>

iframe窗口

<!doctype html><html><head>    <style type="text/css">        html,body{            height:100%;            margin:0px;        }    </style></head><body style="height:100%;">    <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">        click to change color    </div>    <script type="text/javascript">        var container=document.getElementById('container');        window.addEventListener('message',function(e){            if(e.source!=window.parent) return;            var color=container.style.backgroundColor;            window.parent.postMessage(color,'*');        },false);        function changeColor () {                        var color=container.style.backgroundColor;            if(color=='rgb(204, 102, 0)'){                color='rgb(204, 204, 0)';            }else{                color='rgb(204,102,0)';            }            container.style.backgroundColor=color;            window.parent.postMessage(color,'*');        }    </script></body></html>

参考资料

http://www.cnblogs.com/dolphinX/p/3464056.html
http://blog.csdn.net/u012079603/article/details/44039849
http://www.cnblogs.com/feng_013/archive/2011/09/20/2175007.html
http://www.cnblogs.com/giggle/p/5350288.html
https://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/

阅读全文

0 0