vue与iframe之间的信息交互

本文主要是介绍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

这篇关于vue与iframe之间的信息交互的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！