vue - vue和iframe之间通信传值

╰半橙微兮° 2021-07-26 11:00 1970阅读 0赞

### 前言 ###

在vue中使用iframe标签，实现vue和iframe中通信

### vue与iframe通信 ###

// vue
    <template lang="pug">
      .map-content
        iframe#mapIframe(:src="mapIframeUrl" ref="mapFrame" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes")
    </template>
    <script>
    export default { 
      methods: { 
        getGeometry () { 
          let params = 'xxx'
          let temp = this.$refs.mapFrame.contentWindow.getGeometry(params)
          temp.then(res => { 
            resolve(res)
          })
        }
      }
    }
    </script>
    
    // iframe
     function getGeometry (params) { 
      return new Promise(function (resolve, reject) { 
        ...
        resolve(result)
      });
    }

### iframe与vue通信 ###

// iframe
    function postMessage (val) { 
      window.parent.postMessage(val, '*');
    }
    
    // vue
    <script>
    export default { 
      created () { 
        this.$nextTick(() => { 
          window.addEventListener('message', (messageEvent) => { 
            let data = messageEvent.data
            console.log(data)
          })
        })
      }
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，1970人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE中父子组件之间传值

VUE 中父组件向子组件传值直接贴代码了，这里是片段代码，仔细看并尝试写一下应该是没有问题的。父组件： <template> <div>

灰太狼/ 2023年07月09日 13:29/ 0 赞/ 9 阅读

相关 Vue组件之间传值

文章目录一、父组件向子组件传递数据二、子组件向父组件传递数据三、子组件向子组件传递数据一、父组件向子组件传递数据

柔情只为你懂/ 2023年02月19日 13:28/ 0 赞/ 15 阅读

相关 Vue兄弟之间传值

转载自 [https://www.jianshu.com/p/661634c1af9b][https_www.jianshu.com_p_661634c1af9b] ，感谢作者

淡淡的烟草味﹌/ 2022年12月04日 07:54/ 0 赞/ 199 阅读

相关 iframe和页面之间的通信

开发时遇到需要引入第三方iframe层，并且需要有数据交互。 1、页面向iframe传递参数，简单的方法直接放到url里传过去。（ iframe会在本地浏览器缓存，

以你之姓@/ 2022年10月30日 13:22/ 0 赞/ 443 阅读

相关 vue非父子组件、兄弟组件之间的传值通信

一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用`props`来显示的声明父组件传递的属性，例如：子组件： <!--这是子组件

快来打我*/ 2022年10月17日 00:48/ 0 赞/ 233 阅读

相关 vue中组件之间传值

![父子之间传值][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

不念不忘少年蓝@/ 2022年02月15日 11:41/ 0 赞/ 262 阅读

相关 Vue2 组件之间传值

> 组件件的传值有点复杂，我在这里记录一下哈 Vue2.0 传值方式：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必

素颜马尾好姑娘i/ 2021年09月04日 03:17/ 0 赞/ 322 阅读

相关 Vue - 非父子组件之间传值

非父子组件之间传值有两种方式：一. Vuex [https://blog.csdn.net/Jie\_1997/article/details/107228246

た入场券/ 2021年09月01日 12:18/ 0 赞/ 563 阅读

相关 vue - vue和iframe之间通信传值

前言在vue中使用iframe标签，实现vue和iframe中通信 vue与iframe通信 // vue <template lang

╰半橙微兮°/ 2021年07月26日 11:00/ 0 赞/ 1971 阅读

相关 Vue - 详解父子组件之间动态传值

在 vue 项目中经常需要父子组件之间进行传值，在传值过程中可能会遇到很多问题；下面来详细讲解父子组件传值的使用，及使用中常见问题的解决方案。

r囧r小猫/ 2021年07月25日 23:58/ 0 赞/ 1640 阅读