iframe通信案例

父页面

<iframe src="http://localhost:8091" id="receiver" width="100%" height="100%" />

window.addEventListener(
  "message",
  function(e) {
    // 监听 message 事件
    console.log(e.origin);
    if (e.origin == 'http://localhost:8091') {
      // 验证消息来源地址
      console.log(e.data);
      const { type, data } = e.data;
      try {
        if (type === "addPart") {
          eventBus.$emit("direct-add-part", JSON.parse(data));
        }
      } catch (error) {
        console.log(error);
      }
      return;
    }
  },
  false
);

子页面

window.parent.postMessage(
  {
    type: 'addPart',
    data: JSON.stringify({
      ...data,
      id: ''
    })
  },
  'http://localhost:8090'
);