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

  介绍

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

vue是什么软件

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

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

 vue与iframe之间信息交互的实现方法”>,<br/> </p> <p>先上代码然后细细品第一张图</p> <人物> </图> <p> <img src=

第三张图

 vue与iframe之间信息交互的实现方法”>,</p> <p> 1。首先iframe引入你要嵌套的地址2 </p> <p>。通过vue中给出的裁判来获取ifarme的DOM元素</p> <p>如图中的<代码>。iframeWin=refs.iframe美元。contentWindow </代码>【拿到iframe的窗口对象】</p> <p> 3。vue如何向iframe内传送信息可以通过H5新属性postmessage </p> <p>注释:【postmessage是有点类似于UDP协议,就像短的信,是异步的,你发信息过去,但是没有返回值的,只能内部处理完成以后再通过postmessage向外部发送一个消息,外部监听消息为了让postmessage像TCP、为了体验像同步的和实现多通信互不干扰】</p> <p>具体什么是postmessage: point_right: MDN写的很详细https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage </p> <p> 4。通过第二张图的,cmd来区别这条消息的目的<br/> </p> <pre类= {   ,cmd: & # 39;命令& # 39;,   ,参数:{   ,& # 39;键1 & # 39;:,& # 39;值1 & # 39;   ,& # 39;键2 & # 39;:,& # 39;值2 & # 39;   ,}   }

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

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

<代码> postmessage

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

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