vue嵌套iframe并进⾏传值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.$tWindow
     },
     methods: {
       handleMessage(event) {
        let data = event.data
      },
      sendMessage() {
// 向iframe传参
this.iframeWin.postMessage({
          iframeClick: 'getParams',    //  iframe对应⽤来判断触发的是什么事件
          params: {                // 传过去的值
            key: this.params,
          }
          }, '*')
      }
     }
}
iframe中:
<script>
iframe嵌套页面加载慢  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>```

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。