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().