postmessage. mfc_postmessage_mfc postmessage用法

HTML5中的postMessage 方法可实现不同窗体间互相通信了，这个感觉像以前iframe 我们实现父子窗口参数与内容传递的方法差不多了，下面来看html5实现方法。

postMessage 支持实现跨文档消息传输（Cross Document Messaging），并且可跨域传输信息。Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4 以上版本浏览器都已支持 postMessage。

1. postMessage 功能简介

postMessage 主要包含两个 API：

1).消息：onmessage

2).消息发送：postMessage

使用步骤也很简单：

1.1.发送过来的消息

window.addEventListener('message', onMessage, false);

var onMessage = function(){

console.log(e, e.data);

if(e.origin !="http://.111cn.net"){

return false;

}

// 消息处理...

}

注意：

e.data 即接收到的信息。

1.2.向其他窗体发送消息

首先获取要传送消息的窗体对象（如iframe），然后向该对象发送信息

var iframeWin = document.getElementsByTagName('iframe')[0].contentWindow;

iframeWin.postMessage('hello world!', "*");

注意：

进行跨文档消息发送，首先要获取传送对象窗体。所以 postMessage 常用在从当前页创建/打开新窗体或新的 worker 线程中，实现双方通信。请与志文工作室一起来看如下使用示例。postmessage

2. worker 多线程

消息接收处理页面：

消息发送 compute.js

compute.js 中调用 postMessage 方法发送计算结果

3. 跨域

同源跨域可通过修改 window.domain 方式欺骗解决。

非同源跨域可使用 flash 控件或远程加载script文件的 jsonp 方式。postmessage

现在 postMessage 则可简单完成该需求，重要的是，它可以实现 jsonp 无法完成的跨域 POST 请求。

3.1 父窗体创建跨域iframe并发送信息

3.2 子窗体接收信息并处理（如发起XMLHttpRequest请求）

4. postMessage 总结

postMessage 解决了客户端不同窗体间的消息传递问题，特别是跨域消息发送，可解决跨域 POST 请求问题。

另外，解决客户端与服务器的双向实时通信，可参考 HTML5 的 webSocket API.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-35013-1.html