vue与iframe之间的信息交互的实现

站长资源 2024/4/26 佚名

64 1538 64

DDR爱好者之家 Design By 杰米

说一下我的使用场景：在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 :point_right:MDN写的很详细https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

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

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

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

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

postmessage

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“vue与iframe之间的信息交互的实现”

暂无评论...