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

由于该项目是基于原本的安卓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内部如何处理这个信息呢？

    
    
    



    
Hello there, i'm an iframe

    

至此内部的收发信息已经解决了，外部的收发也已经解决了，快去解决你的问题吧

在这里先直接给出我项目的源码

欢迎大家来看看我的博客 https://www.windzh.com