浏览器父子窗口通讯之 postMessage

刘启春
Web技术

在浏览器中，postMessage() 函数是用来实现安全跨网站通讯，可以是另一个浏览器的 tab 或者嵌入页面的 iframe。这个接口可以让浏览器的页面协作起来，实现更丰富的功能，例如我们准备开发一个可能重用的页面组件，便可以将页面通过 iframe 嵌入然后通过 postMessage() 进行通讯。

postMessage() 的格式

父页面与子页面通讯

我们假设子页面是 iframe 页面，往 iframe 页面发消息为：

...
<iframe name="myiframe" id="myrame" src="http://www.example.com/"> </iframe>
...
<script>
  // 获取iframe标签
  let iframe = document.getElementById("myrame");
  // 获取iframe的window对象
  let iwindow = iframe.contentWindow;

  // 父页面给子页面（iframe）发消息
  // 第一个参数是要发送的数据（体）
  iwindow.postMessage(
    {
      msg: "hello world",
    },
    "http://www.example.com"
  ); // URL 可以用 iwindow.origin 代替

  // 注册监听事件
  window.addEventListener("message", handleMessage, false);
  // 处理消息
  function handleMessage(event) {
    // event 包含对象 {source, origin }
    // source 是事件源的窗口对象
    // origin 源窗口的URL e.g. https://elltor.com

    // 给源窗口发送「回执」事件
    event.source.postMessage(
      {
        msg: "hello world",
      },
      event.origin
    );
  }
</script>

EOF