postMessage和onMessage

html5提供了postMessage和onMessage这一对方法来在不同的文档页或者不同的工作线程之间进行通信。

在不同的文档页内通信

什么叫做不同的文档页？如果一个页面上面嵌套了iframe，那么iframe和外层的页面属于两个不同的文档页。

    //parent html
    <iframe id="child" src="http://child.com:8083/child.html"></iframe>
    function sendMessage(){
        document.getElementById('child').contentWindow.postMessage('message from parent', 'http://child.com:8083');
    }

    window.onmessage = function(message){
        console.log(message);
    }
    //child html
    function sendMessage(){
        window.parent.postMessage('message from child', 'http://parent.com:8083');
    }

    window.onmessage = function(message){
        console.log(message);
    }

console.log(message)打印出来的消息对象是这个东东

postMessage(data, origin)接收两个参数

1. data是消息对象，javascript中任何可以clone的对象都可以作为信息传递。
2. origin是字符串参数，指定目标窗口的源，格式为：协议+域+端口，消息只会发送给特定的窗口。如果为*,则发送给任意窗口。

在不同的工作线程之间通信

工作线程是html5里面提出来的一个新api，对于javascript我们的印象是单线程执行，如果运行复杂运算的时候，页面可能就会失去响应。工作线程创建后，会在后台执行，并不会影响浏览器对于页面的响应。

    //main.html
    var work = new Worker('work.js');

    work.onmessage = function(message){
        console.log(message);
    }

    //work.js
    while(i < 1000000000){
        i++;
    }

    postMessage({workdown:'yes'});

Worker的使用很简单，直接new一个出来，接收一个指向执行的javascript代码的地址。通过worker实例的onmessage方法可以接受工作线程发送过来的响应信息。工作线程通过postMessage可以向主线程发送消息,但是注意，这里的postMessage只接受一个参数，还记得上面的通过postMessage在文档间传递消息是需要两个参数的，除了消息本身之外还需要传递目标窗口的源。
最后工作线程创建出来，如果不用了记得把他干掉work.terminate().