［javascript］ postmessage

摘要

postmessage 作为 html5 跨域传值的解决方法，灰常好用啊。。本次用的是页面a 用iframe 嵌入 页面b。

使用方法

postmessage 参数
otherWindow.postMessage(message, targetOrigin, [transfer]);
message 为 待传递的信息，字符串
targetOrigin 为可接收此信息的页面范围， 一般为域名 ， 如果 是 '*' 的话，表示不限制
transfer 参数可省略，一般写false。 Is a sequence of Transferable objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no longer usable on the sending side. 看官方的解答应该是数据序列化，然后指定发送端是否可使用该信息。

详细请见：https://www.baidu.com/link?url=e4KGAWVbYtXer7ucuLf8Q0oMFGUiFJQtj94pDUI8SURSXz8usBj5TeFXpYDjrCTfU7vjshl1smO4Kd3Q4E1jNcPN0YF6tS91hYpGAumJNj7&wd=&eqid=bf9cc4d7000167270000000457feee24

坑

父页面a 传数据时一定要在 子页面 addEventlistener 之后，否则子页面是接收不到数据的。所以我们在使用时，可以参考通信中的三次握手。 子页面addEventlistener 之后 ，采用 postmessage send 信息给父页面，告诉父页面，子页面已经准备好了，可以传数据了。如此避免数据丢失！！！

原生 js 版本

页面a

<iframe src="页面b URL"  id="test"></iframe>

window.addEventListener('message', function(event) {
    var data = event.data;
    if (data == 'ready') {   // 子页面准备完毕，向其发送信息
        document.getElementById('#test').contentWindow.postMessage('parent ready', '*');
    }else {
        console.log('接收到子页面信息');
    }
}, false);

页面b

window.addEventListener('message', function(event) {
    var data = event.data;
    console.log('接收到父页面信息');
}, false);

//向父页面发送信息
window.parent.postMessage('xx', '*');

jquery 版本

页面a

<iframe src="页面b URL"  id="test"></iframe>

window.addEventListener('message', function(event) {
    var data = event.data;
    if (data == 'ready') {   // 子页面准备完毕，向其发送信息
        $('#test')[0].contentWindow.postMessage('parent ready', '*');
    }else {
        console.log('接收到子页面信息');
    }
}, false);

页面b

window.addEventListener('message', function(event) {
    var data = event.data;
    console.log('接收到父页面信息');
}, false);

//向父页面发送信息
window.parent.postMessage('xx', '*');

可参考资料

张鑫旭 http://www.zhangxinxu.com/wordpress/2012/02/html5-web-messaging-cross-document-messaging-channel-messaging/