首页 > 其他分享 >高度自适应iframe(Vue3)

高度自适应iframe(Vue3)

时间:2024-05-09 19:11:27浏览次数:22  
标签:const iframe 适应 window setIframeHeight Vue3 onBeforeUnmount resize

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>

标签:const,iframe,适应,window,setIframeHeight,Vue3,onBeforeUnmount,resize
From: https://www.cnblogs.com/openmind-ink/p/18182932

相关文章

  • CSS JS 自适应菜单
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>ResponsiveMenu</t......
  • python适应不同场景的函数 - *args, **kwargs
    在Python中,*args和**kwargs是用来处理函数中不定数量的参数的特殊语法。*args和**kwargs介绍*args*args用于传递不定数量的位置参数,它会将传递给函数的位置参数收集到一个元组中。例如:defmy_func(*args):forarginargs:print(arg)my_func(1,2,3)在这个......
  • 关于vue3中使用echarts设置tooltip的type为axis不显示的问题
    因为vue3中的数据对象是用的proxy监听的,要取值需要用value等方法取出来,解决方法:使用markRaw让echarts从监听对象变成普通对象!在Vue3中,markRaw是一个用于告诉Vue的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象,并且你确定你不需要它成为响应性......
  • 解决Vue3项目警告:xxxis-declared-but-its-value-is-never-read
    刚刚在Vue3项目引入的一个组件Person下有红线,系统给出了警告,这是因为TypeScript会检查代码中未使用的变量,我定义了'Person'的变量,但是后续代码没有使用到它,从而导致Vetur(Vue的语法检查工具)给出了这个警告。解决方法:方法一:你可以删除或者在代码中使用'Person'变量或类型,以......
  • 探索网站支付系统的奥秘,从Vue3和Spring Boot开始(入门级项目实战+在线教程)附赠项目源码
    你是否曾经在购物时,对着电脑屏幕前的“支付成功”四个字感到好奇?这背后的秘密究竟是什么?今天,让我们一起揭开支付系统的神秘面纱,探索其背后的技术实现。在这个基于Vue3和SpringBoot的支付项目实战中,我们将带你一步步了解支付系统的实现思路。这个项目不仅解决了常用支付方式的......
  • 【vue3入门】-【0】前言
    本人是一名四年的软件测试人员,想努力向测试开发方向发展,因此在学习的道路上不停在探索。软件测试所需要的知识面太过庞大,但感觉好的测试开发都是会写前端的,也算是在模仿前辈们的脚步前进,希望不会让自己太受打击了,哈哈哈。对于前端,其实是断断续续有在接触,包括html、css、js,但是苦......
  • 【vue3入门】-【20】组件注册方式
    组件注册方式一个vue组件在使用前需先被“注册”,这样vue才能在渲染模版是找到其对应的实现。组件注册有两种方式:全局注册和局部注册全局注册在最外层注册一次,在最内层组件都能使用main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importHeaderfrom......
  • 【vue3入门】-【21】 组件传递数据
    组件传递数据_Props静态数据传递组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的传递数据的解决方案就是propsapp.vue<template><!--主要要生效Header中的样式,需要删除main.json中默认的main.css样式--><!--不需要再次引入,可以直接使......
  • 【vue3入门】-【22】 组件事件
    组件事件在组件的模版表达式中,可以直接使用$emit方法触发自定义事件触发自定义事件的目的是组件之间传递数据,通过组件事件可以实现子级传递参数给父级App.vue<template><ComponentEvent/></template><script>importComponentEventfrom"./components/componentEvent.......
  • 页面嵌套,界面套娃,除了用iframe,还有其他方式吗?
    ​ UIOTOS可以了解下,uiotos.net,通过连线来代替脚本逻辑开发,复杂的交互界面,通过页面嵌套轻松解决,是个很新颖的思路,前端零代码!蓝图连线尤其是独创的页面嵌套和属性继承技术,好家伙相当于把vue的组件化、增量式面向对象开发,直接搬到前端拖拽工具上,无代码编程了。总的来说,这上面的......