iFrame嵌套传参

iFrame嵌套传参

情况说明：两个Vue项目嵌套（vue父，Vue子）

vue父

// vue父
<iframe
        ref="iframeParms"
        width="100vw"
        height="100vh"
        class="iframe-box"
        :src="就是子项目的路径"
        frameborder="0"
      />

第一步：嵌套完成，开始通信

Vue子

先在Vue子项目的 mounted里面建立一个与Vue父项目的链接
1.考虑到我的Vue父项目加载iframe需要时间，我在子项目中加了300毫秒的延迟
2.像Vue父发送一个信息，告诉他已经连接成功

mounted() {
  setTimeout(() => {
      window.parent.postMessage('init', '*') // 向父组件发送一个 init的消息信息
  }, 300)
}

Vue父

同样也是在mounted里面监听一下子项目传递的消息

  mounted() {
    window.addEventListener('message', (e) => {
      const { data } = e
      if (data === 'init') {
      //接收到子项目传过来的init信息，就开始进行向子项目的传参操作
        setTimeout(() => {
          this.iframeBox = this.$refs.iframeParms.contentWindow // 关键步骤
          this.iframeBox.postMessage({
            action: 'params',
            params: {
              authToken: this.token.Authorization,
              name: this.token.sysLoginUserBO.empName,
              discoverer: this.token.sysLoginUserBO.id
            }
          }, '*')
        }, 1000)
      }
      if (data === 'changeShow') {
        //  可以写你的处理逻辑
      }
      if (data === 'changeShow1') {
        //  可以写你的处理逻辑
      }
    })
  },

父项目向子发消息

this.iframeBox = this.$refs.iframeParms.contentWindow
this.iframeBox.postMessage('cancel', '*')

子项目接收父传过来的参数及信息

  mounted() {
    window.addEventListener('message', (e) => {
      const { data } = e
      console.log(e, '3333333333333333')
      if (data.action === 'params') {
        console.log(data.params)
        const { authToken, id, name, discoverer } = data.params
        sessionStorage.setItem('authToken', authToken)
        sessionStorage.setItem('insideOrgId', id)
        this.temp.discovererName = name
        this.temp.discoverer = discoverer
      }
      if (data === 'cancel') {
        this.cancel()
      }
      if (data === 'submit') {
        this.save()
      }
    })
    setTimeout(() => {
      window.parent.postMessage('init', '*')
    }, 300)
  }