zoukankan      html  css  js  c++  java
  • 关于vue项目和内嵌iframe页面之间的通信问题

    最近项目中遇到一个与内嵌iframe页面之间通信的问题,起初与原生之间通信很简单,没想到过与vue项目通信的问题,霎时间一脸懵*啊,百度了一下,原来是那么简单,这里记录下以供下次参考

    //vue页面 向 内嵌iframe传递事件
    
    // vue页面代码
    let frame = document.getElementById('iframeId');  // 或者用vue语法 let frame = this.$refs.iframeId
    frame.contentWindow.postMessage(object,'*');   //  object为传送的对象   *号为接收数据的项目地址
    
    
    
    // iframe页面
    window.addEventListener('message',function(event){
        

    ·// 传送的数据在event.data里面 })
    //  iframe页面向vue项目页面传递事件
    
    //  iframe页面
    window.parent.postMessage(object,'*');   //  object为需要传送的数据对象  *号为接收数据的项目url地址
    
    //主页面
    window.addEventListener('message',,function(event){
        
             //  数据在event.data对象中
    })
  • 相关阅读:
    VUE权限列表控制
    VUE-element-UI修改内置样式
    微信开发-url地址传值踩坑
    git 上传命令
    微信开发-缩略图插件
    axios拦截器
    设置contentType
    JSON.parse 函数应用 (复制备忘)
    angularjs开发遇到的坑
    http 请求头
  • 原文地址:https://www.cnblogs.com/cscredis/p/10203214.html
Copyright © 2011-2022 走看看