vue与iframe之间信息交互的实现方法-mile米乐体育

这篇“vue与iframe之间信息交互的实现方法”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“vue与iframe之间信息交互的实现方法”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

vue是什么软件

vue是一套用于构建用户界面的渐进式javascript框架，vue与其它大型框架的区别是，使用vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

说一下我的使用场景：在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

感谢你的阅读，希望你对“vue与iframe之间信息交互的实现方法”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注恰卡编程网行业资讯频道！