vue内嵌iframe跨域通信的实例代码

目录

• vue内嵌iframe跨域通信
• 1、Vue组件中如何引入iframe？
• 2、vue如何获取iframe对象以及iframe内的window对象？
• 3、vue如何向iframe内传送信息？
• 4、iframe内如何向外部vue发送信息？

vue内嵌iframe跨域通信

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
 
    

到此这篇关于vue内嵌iframe跨域通信的文章就介绍到这了,更多相关vue内嵌iframe跨域通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！