窗口间通信方案——postMessage
【窗口间通信方案——postMessage】postMessage 是 html5 引入的 API,postMessage 方法允许来自不同源
的脚本采用异步方式进行通信,其实同源不同页面
的脚本也可以采用 postMessage 方法进行通信。
介绍
发送数据
需要在接收数据窗口的全局对象下调用该方法。
targetWindow.postMessage(message, targetOrigin, [transfer])
- targetWindow:目标窗口的
全局对象
引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 - message:将要发送到
目标窗口
的数据,可以是任何类型的数据。它将会被结构化克隆算法序列化。这意味着可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。 - targetOrigin:指定目标窗口的 origin ,只有目标窗口的 origin 与 targetOrigin 对应,目标窗口才可以接收到数据。
- *:表示可以发送数据到任何 origin 的窗口,但通常处于安全性考虑不建议这么做。
- /:表示可以发送给当前窗口的同源窗口。
- transfer:可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
接收数据的窗口,监听 window 对象的 message 事件,从 event 对象里获取相关数据。
window.addEventListener('message', (event) => {
const { data, origin, source } = event
/* some code */
})
- data:从其他 window 中传递过来的数据。
- origin:发送窗口的 origin,一个由“协议“、“://“、“域名"、“ : 端口号”拼接而成的字符串。
- source:对发送消息的窗口对象的引用,可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。
接收数据的窗口,需要通过 event.origin 判断发送数据窗口的身份。
实例 两个窗口之间的通信
推荐阅读
- debian安装ncat只为测udp网络通信
- 致命错误(第463行的C:\xampp\htdocs\AKS_Shop\wp-includes\Requests\Transport\cURL.php中超过30秒的最大执行时间)
- 中间件|推荐一个完善的停车管理系统,物联网项目springboot,有源码
- Go语言 之Socket简单C/S模型通信
- Monkey测试
- Linux系统编程进程地址空间和虚拟地址空间
- Linux系统编程进程间通信之无名管道
- rsync实现服务器之间同步目录文件
- 实例7(stc8a8k定时器0,定时50ms,进入中断之后,加数20次到1秒,计算时间。)
- 小车,测走过的距离,计算走过的时间,stc8a8k