vue与iframe之间的信息交互

使用场景：在vue中使用百度地图，须要使用离线地图

先上代码 而后细细品 第一张图

第二张图

第三张图

1.首先iframe 引入你要嵌套的地址

2.经过vue中给出的ref 来获取 ifarme的DOM元素

如图中的 this.iframeWin = this.$refs.iframe.contentWindow 【拿到iframe的window对象】

3.vue如何向iframe内传送信息 能够经过H5新属性 postmessage

注释：【postMessage是有点相似于UDP协议，就像短信，是异步的，你发信息过去，可是没有返回值的，只能内部处理完成之后再经过postMessage向外部发送一个消息，外部监听message为了让postMessage像TCP，为了体验像同步的和实现多通讯互不干扰】

具体什么是postmessage 👉MDN写的很详细 developer.mozilla.org/zh-CN/docs/…

4.经过第二张图的 cmd来区别这条message的目的

{
  cmd: '命令',
  params: {
    '键1': '值1',
    '键2': '值2'
  }
}
复制代码

5.第三张图 就是接收 父页面发来的信息 能够经过 判断语句写相应的逻辑

6.第一张图中 不难看出 能够监听到 iframe中的发来的信息

postmessage