摘要:由于该项目是基于原本的安卓,做的微信,所以原来的使用的页面现在需要在中实现,那就是使用查看了很多很多文档,其中这一篇是很有价值的下面将天的爬坑最终以问答的方式总结如下组件中如何引入如何获取对象以及内的对象如何向内传送信息内如何向外部发送信息
由于该项目是基于原本的安卓app,做的微信h5,所以原来的使用webview的页面现在需要在vue中实现,那就是使用iframe
查看了很多很多文档,其中这一篇是很有价值的 https://gist.github.com/pboji...
下面将3天的爬坑最终以问答的方式总结如下:
1、Vue组件中如何引入iframe?
2、vue如何获取iframe对象以及iframe内的window对象?
3、vue如何向iframe内传送信息?
4、iframe内如何向外部vue发送信息?
1、Vue组件中如何引入iframe?
如上,直接通过添加iframe标签,src属性绑定data中的src,第一步引入就完成了
2、vue如何获取iframe对象以及iframe内的window对象?
在vue中,dom操作比不上jquery的$("#id")来的方便,但是也有办法,就是通过ref
然后就是获取iframe的window对象,因为只有拿到这个对象才能向iframe中传东西
3、vue如何向iframe内传送信息?
通过postMessage,具体关于postMessage是什么,自己去google, 我的理解postMessage是有点类似于UDP协议,就像短信,是异步的,你发信息过去,但是没有返回值的,只能内部处理完成以后再通过postMessage向外部发送一个消息,外部监听message 为了让postMessage像TCP,为了体验像同步的和实现多通信互不干扰,特别制定的message结构如下
{ cmd: "命令", params: { "键1": "值1", "键2": "值2" } }
通过cmd来区别这条message的目的
具体代码如下
向iframe发送信息
4、iframe内如何向外部vue发送信息?
现在通过点击“向iframe发送信息”这个按钮,从外部vue中已经向iframe中发送了一条信息
{ cmd: "getFormJson", params: {} }
那么iframe内部如何处理这个信息呢?
iframe Window Hello there, i"m an iframe
至此内部的收发信息已经解决了,外部的收发也已经解决了,快去解决你的问题吧
在这里先直接给出我项目的源码
提交
欢迎大家来看看我的博客 https://www.windzh.com
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97355.html
摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...
摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...
摘要:需注意的是由于同源策略的限制,所读取的为跨域请求接口所在域的,而非当前页。目前,所有浏览器都支持该功能需要使用对象来支持,也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略,不是协议的一部分。 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源...
阅读 1608·2021-11-23 10:07
阅读 2603·2019-08-30 11:10
阅读 2819·2019-08-29 17:08
阅读 1757·2019-08-29 15:42
阅读 3128·2019-08-29 12:57
阅读 2379·2019-08-28 18:06
阅读 3508·2019-08-27 10:56
阅读 363·2019-08-26 11:33