iframe 与 postMessage 小记iframe 与 postMessage 小记、iframe 与 post

父窗口

引入 iframe

<iframe :src="iframeUrl" frameborder="0" @load="onLoad" ref="iframeWrap"></iframe>

发送消息

要在 onLoad 函数中发送事件

 // 根据不同的环境 获取要发送消息的域名
const sendTargetOrigin = (function () {
  let env 
  let hostMap = {
    dev: "http://localhost:8080",
    pro: "http://...",
  };
  return hostMap[env] || "*";
})();


this.$refs.iframeWrap.contentWindow.postMessage(JSON.stringify({}), sendTargetOrigin); // vue2

子窗口

接收消息

// receiveTargetOrigin 要与上面的变量保持一致

window.addEventListener("message", function (event) {
  let { origin, data } = event;

  // 判断信息是否接收
  if (origin !== receiveTargetOrigin && receiveTargetOrigin !== "*") return;

  // 获取数据
  try {
    data = JSON.parse(data);
  } catch (error) {
    data = Object.create(null);
  }
});