如何实现Vue与iframe之间复杂且多样化的信息交互功能？

本文共计292个文字，预计阅读时间需要2分钟。

以下是对原文的简化

谈谈我的使用场景：在Vue中使用百度地图，需要使用离线地图。步骤如下：1. 首先iframe引入所需地址；2. 通过Vue中的ref获取iframe；3. 使用获取到的iframe。

说一下我的使用场景：在vue中使用百度地图，需要使用离线地图

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

第二张图

第三张图

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

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

如图中的 this.iframeWin = this.$refs.iframe.contentWindow

3.vue如何向iframe内传送信息 可以通过H5新属性 postmessage

注释：

具体什么是postmessage :point_right:MDN写的很详细developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

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

{ cmd: '命令', params: { '键1': '值1', '键2': '值2' } }

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

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

postmessage

到此这篇关于vue与iframe之间的信息交互的实现的文章就介绍到这了,更多相关vue iframe信息交互内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！