vue中iframe的使用（1）

1. 记录vue中使用iframe，直接上代码

父元素给iframe传值的方法

<template>
  <div>
      <iframe ref="iframeClass" src="https://xxxxxx/iframe-online-service" width="1000" height="700" frameborder="0"></iframe>
<button @click="testFun">测试</button>
  </div>
</template>

<script>
export default {
  mounted(){
    // 方法一
        const iFrame = that.$refs['iframeClass']
        iFrame.onload = function () {
          let data = {
            agentId: 'zzzz'
          }
          iFrame.contentWindow.postMessage(data, '*')
        }
  },
  methods: {
    // 方法二
    testFun(){
        const iFrame = that.$refs['iframeClass']
        let data = {
            agentId: 'zzzz'
          }
          iFrame.contentWindow.postMessage(data, '*')
        }
    }
}
</script>
<style lang="less" scoped>

</style>

iframe接收父元素传的值

<template>
  <div> iframe子元素 </div>
</template>

<script>
export default {
  mounted(){
      window.addEventListener('message', (e) => {
          const data = e.data
          console.log(e)
      })
  }
}
</script>
<style lang="less" scoped>

</style>