高度自适应iframe(Vue3)

https://juejin.cn/post/7283306395913617427

<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>
posted @   Felix_Openmind  阅读(564)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}
点击右上角即可分享
微信分享提示