vue3 iframe 高度自适应

为了实现Vue3中的iframe高度自适应，可以使用以下步骤：

1. 在父组件中，使用ref获取iframe元素，并在mounted钩子函数中添加事件监听器，以便在iframe加载完成后调整其高度。

2. 在事件监听器中，使用postMessage方法向iframe发送消息，以便在iframe中设置其高度。

3. 在iframe中，添加事件监听器以便在接收到消息时设置其高度。

下面是一个示例代码：

在父组件中：

<template>
  <div>
    <iframe ref="myIframe" :src="src" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'http://example.com'
    }
  },
  mounted() {
    const iframe = this.$refs.myIframe
    iframe.addEventListener('load', () => {
      const height = iframe.contentWindow.document.body.scrollHeight
      iframe.contentWindow.postMessage({ height }, '*')
    })
    window.addEventListener('message', event => {
      if (event.data && event.data.height) {
        iframe.style.height = event.data.height + 'px'
      }
    })
 }
}
</script>

在iframe中：

<template>
  <div>
    <p>这是一个iframe</p>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('message', event => {
      if (event.data && event.data.height) {
        this.$el.style.height = event.data.height + 'px'
      }
    })
    window.parent.postMessage({ height: this.$el.scrollHeight }, '*')
  }
}
</script>