浏览器父子窗口通讯之 postMessage
在浏览器中，postMessage() 函数是用来实现安全跨网站通讯的，可以是另一个浏览器的 tab 或者嵌入页面的 iframe。这个接口可以让浏览器的页面协作起来，实现更丰富的功能。例如我们准备开发一个可复用的页面组件，便可以将页面通过 iframe 嵌入，然后通过 postMessage() 进行通讯。
postMessage() 的格式
父页面与子页面通讯
我们假设子页面是 iframe 页面，往 iframe 页面发消息为：
1...
2<iframe name="myiframe" id="myrame" src="http://www.example.com/"> </iframe>
3...
4<script>
5 // 获取iframe标签
6 let iframe = document.getElementById("myrame");
7 // 获取iframe的window对象
8 let iwindow = iframe.contentWindow;
9
10 // 父页面给子页面（iframe）发消息
11 // 第一个参数是要发送的数据（体）
12 iwindow.postMessage(
13 {
14 msg: "hello world",
15 },
16 "http://www.example.com"
17 ); // URL 可以用 iwindow.origin 代替
18
19 // 注册监听事件
20 window.addEventListener("message", handleMessage, false);
21 // 处理消息
22 function handleMessage(event) {
23 // event 包含对象 {source, origin }
24 // source 是事件源的窗口对象
25 // origin 源窗口的URL e.g. https://elltor.com
26
27 // 给源窗口发送「回执」事件
28 event.source.postMessage(
29 {
30 msg: "hello world",
31 },
32 event.origin
33 );
34 }
35</script>
EOF