【手写vue3组件】高度自适应iframe

正常情况下，我们会给iframe一个固定高度，这样就会出现滚动条，如何能完整显示内容又不会出现滚动条呢？

<script setup>
import { ref, onBeforeUnmount } from 'vue'

defineProps({
    srcdoc: {
        type: String,
        default: ''
    }
})

const iframe = ref()
const setIframeHeight = () => {
    setTimeout(() => {
        iframe.value.height =
            iframe.value?.contentWindow?.document?.documentElement?.offsetHeight || 0
    }, 150)
}
window.addEventListener('resize', setIframeHeight)
onBeforeUnmount(() => window.removeEventListener('resize', setIframeHeight))
</script>

<template>
    <iframe
        ref="iframe"
        :srcdoc="srcdoc"
        height="0"
        scrolling="no"
        @load="setIframeHeight"
    ></iframe>
</template>

<style scoped>
iframe {
    border: 0;
    width: 100%;
}
</style>

contentWindow 会受到同源策略的影响，无法跨域获取 document 等原因，所以没使用src。