本文主要是介绍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之间的信息交互的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!