postMessage跨源通信

postMessage()简单介绍

window.postMessage() 方法可以实现跨源通信，实现来自不同脚本之间的信息传递

语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

字段说明：

otherWindow	其他窗口的一个引用。比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames
message	将要发送到其他window的数据。它会被结构化克隆算法序列化，意味着可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化
targetOrigin	通过窗口的origin属性指定哪些窗口能接收到消息事件，可以是字符串"*"(表示无限制)或者是一个URL。在发送消息的时候，如果目标窗口的协议、地址、端口三者的任意一项不匹配targetOrigin提供的值，消息就不会被发送；只有三者完全匹配才会发送；这样可以控制消息可以发送到哪些窗口。如果明确知道消息要发送到哪些窗口，就传递一个有确切值对的targetOrigin。
transfer	可传可不传，是一串和message同时传递的Transferable对象，对象的所有权将被转移给消息的接收方，发送方将不再保留所有权。

项目实现

需求：在页面管理做以下操作的时候，让左侧菜单栏自动刷新(左侧菜单和页面管理为一个项目下不同的脚本)

实现：

1、在操作页面的功能逻辑中发送消息；

说明：每个内容区域都是一个iframe，parent是嵌套的iframe的父窗口

parent.postMessage(
  {
    type: "menu",
    menuMsg: Math.random(), // 自定义传递的消息，在这传递是随机数
  },
  parent.origin
);

2、vuex管理传递过来的数据；

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        menuMessage: ""
    },
    mutations: {
        updateMenu: (state, payload) => state.menuMessage = payload,
    },
     actions: {
    },
    modules: {
    }
});

3、在全局main.js监听发送的message，并将传递的数据存储到vuex中；

说明：

◆ ev.data --- 发送过来的消息

◆ en.origin --- 消息源的URL，包含协议、域名和端口，用来验证数据源

◆ en.source --- 消息源

addEventListener("message", (ev) => {
  if (ev.origin !== origin) {
    return;
  }
  // ev.data 就是发送过来的type、menuMsg...
  switch (ev.data.type) {
    case "menu":
      const menuData = ev.data.menuMsg
      store.commit("updateMenu", menuData);
      break;
  }
});

4、在菜单渲染的页面，监听vuex

<script>
  computed: {
    ...mapState({
      menuMessage:(state) => state.menuMessage
    })
  },
  watch: {
     menuMessage (newVal) {
     this.refresh() // methods中获取菜单的方法
      }
  },
</script>