Vue iframe之间通讯

最新推荐文章于 2025-06-19 08:10:05 发布

前端李小白

最新推荐文章于 2025-06-19 08:10:05 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue iframe 文章标签： vue iframe

本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/119575394

vue 同时被 2 个专栏收录

58 篇文章

订阅专栏

iframe

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中利用iframe的onload事件和postMessage方法实现与子应用的数据交互。主应用在iframe加载完成后发送消息，子应用在mounted阶段监听onmessage事件来接收和响应这些消息。同时，子应用同样可以通过postMessage向主应用发送消息，主应用的接收方式与子应用类似。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、主应用通过在iframe的onload事件中，使用postMessage向子应用进行数据交互
2、子应用在mounted阶段通过监听onmessage事件进行接收事件

主应用

<template>
  <div v-tip="loading" :style="'height:' + (isQiankun ? qiankunHeight : height)">
    <iframe
      ref="iframe"
      :src="src"
      frameborder="no"
      style="width: 100%;height: 100%"
      scrolling="auto"
      @load="loaded"
    />
  </div>
</template>
<script>
// import Cookies from 'js-cookie'
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 90 + 'px;',
      qiankunHeight: document.documentElement.clientHeight - 114 + 'px;',
      loading: 'loading'
    }
  },
  computed: {
    isQiankun() {
      return this.$root.isQiankun
    }
  },
  mounted() {
    this.loading = 'loading'
    // setTimeout(() => {
    //   this.loading = false
    //   // console.log(this.$refs.iframe.contentWindow.aaa = 'hzh')
    // }, 230)
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 90 + 'px;'
    }
  },

  activated() {
    // setTimeout(() => {
    //   this.loading = false
    // }, 230)
    this.loading = 'loading'
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 90 + 'px;'
    }
  },
  methods: {
  	//	向子应用下发数据
    loaded() {
      const iframe = this.$refs.iframe.contentWindow
      iframe.postMessage(
        {
          type: 'ytzg',
          isShowMenu: false
        },
        '*'
      )
      this.loading = false
    }
  }
}
</script>

子应用

mounted(){
    window.addEventListener('message',this.handleMessage)
    this.$on('hook:beforeDestory',()=>{
        window.removeEventListener('message',this.handleMessage)    
    })
}

methods:{
    handleMessage(event){
        conosle.log(event.data)
        const {data} = event
        if(data.type === 'ytzg'){
            this.devEnv = false        
        }    
    }
}

如果子应用也需要向主应用进行通讯

window.parent.postMessage({type:'parent'}, '*');

主应用进行接收的方式与子应用接收的方式相同

mounted(){
    window.addEventListener('message',this.handleMessage)
    this.$on('hook:beforeDestory',()=>{
        window.removeEventListener('message',this.handleMessage)    
    })
}

methods:{
    handleMessage(event){
        conosle.log(event.data)
        const {data} = event
        if(data.type === 'parent'){
           conosle.log('从子应用的传递的值')
        }    
    }
}