浅谈HTML5 postMessage_html postmessage 数据支持什么结构-CSDN博客

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).消息监听：onmessage
2).消息发送：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：顾名思义，是传递来的message
source：发送消息的窗口对象
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>