资讯专栏INFORMATION COLUMN

前端爬坑日记之vue内嵌iframe并跨域通信

dreambei / 2328人阅读

摘要:由于该项目是基于原本的安卓,做的微信,所以原来的使用的页面现在需要在中实现,那就是使用查看了很多很多文档,其中这一篇是很有价值的下面将天的爬坑最终以问答的方式总结如下组件中如何引入如何获取对象以及内的对象如何向内传送信息内如何向外部发送信息

由于该项目是基于原本的安卓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的目的

具体代码如下



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

相关文章

  • 前端--iframe爬坑记录

    摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...

    CntChen 评论0 收藏0
  • 前端--iframe爬坑记录

    摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...

    nanchen2251 评论0 收藏0
  • 前端--iframe爬坑记录

    摘要:且中没有缓存这些消息。查阅了很多资料,后来发现这又是一坑。在没有加载完成的情况下,消息自然是发不到的。解决办法就是需要的事件写到的事件中,代码如下 1、iframe通信 由于项目中有用到vue嵌入静态页面实现功能,vue页面和普通H5页面通信就是个问题。这篇文章写得很详细https://segmentfault.com/a/11... 但是在开发过程中还是遇到了一些问题,比如:ifra...

    awkj 评论0 收藏0
  • 跨域总结

    摘要:跨域的解决方案利用标签不受跨域限制而形成的一种方案。跨域资源共享标准新增了一组首部字段,允许服务器声明哪些源站有权限访问哪些资源。它是基于的全双工通信即服务端和客户端可以双向进行通讯,并且允许跨域通讯。 1.什么是跨域 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源指:协议、域名、端口号必须一致。 同源策略控制...

    chuyao 评论0 收藏0
  • 前端常见跨域解决方案(全)

    摘要:需注意的是由于同源策略的限制,所读取的为跨域请求接口所在域的,而非当前页。目前,所有浏览器都支持该功能需要使用对象来支持,也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略,不是协议的一部分。 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源...

    canger 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<