【vue 如何取到iframe里面的值】-博文推荐-CSDN博客

安宇雨 - 随手采集
2020-04-27 12:34:59
随手采集
0000-未整理-等待研究

vue中引入iframe

<template>
    <div>
        <iframe src="链接" ref="iframe"></iframe>
    </div>
</template>

父级vue中：

<script>
    export default {
        data: {
            iframeVue: null
        },
　　　　　mounted(){
　　　　　　　　window.addEventListener('message', this.handleMessage) // 监听iframe的事件
　　　　　　　　this.iframeVue= this.$refs.iframe.contentWindow
　　　　　},
　　　　　methods: {
　　　　　　　handleMessage(event) {
　　　　　　　　let data = event.data
　　　　　　},
　　　　　　sendMessage() {
            // 向iframe传参
            this.iframeWin.postMessage({
　　　　　　　　　　iframeClick: 'getParams',     //  iframe对应用来判断触发的是什么事件
　　　　　　　　　　params: {                 // 传过去的值
　　　　　　　　　　　　key: this.params,   
  　　　　　　　　　　}
　　　　　　　　　　}, '*')
　　　　　　}
　　　　　} 
}

iframe中：

<script>
　　export default {
　　　　data: {
　　　　　　iframeVal: null ,    // 为了接受vue传过来的值
　　　　},
　　　　mounted() {
　　　　　　// 接受vue传过来的值
　　　　　　window.addEventListener('message', (event) => {
  　　　　　　console.log(event)
  　　　　　　let data = event.data;
  　　　　　　switch (data.iframeClick) {
    　　　　　　case 'getParams':
      　　　　　this.iframeVal= data.params.key;   // 这样就拿到了vue传过来的params
  　　　　　　}
　　　　　　})
　　　　}
　　}
</script>```

Original url: Access
Created at: 2020-04-27 12:34:58
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论