vue iframe 高度自适应
时间: 2023-08-28 15:22:28 浏览: 95
在Vue中,可以使用iframe标签来实现高度自适应的效果。一种方法是使用动态计算iframe父级标签的高度,然后将iframe的高度设置为100%。在父组件中,设置一个元素包住iframe,并将其父级标签的初始高度设置为一个合适的值(例如500px)。然后在子组件中,将iframe的高度设置为100%。这样,当父级标签的高度发生变化时,iframe的高度也会自动调整。可以参考以下代码示例:
父组件中的代码:
```html
<div id="myIframe" style="position: 'relative'; width: '100%'; height: '500px';">
<iframe :src="src" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
```
子组件中的代码:
```html
<template>
<div>
<!-- 其他内容 -->
<div id="myIframeWrapper">
<iframe :src="src" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
</div>
</template>
<style>
#myIframeWrapper {
position: relative;
width: 100%;
height: 100%;
}
</style>
```
通过这种方式,当父组件的高度发生变化时,iframe的高度会自动适应父组件的高度,实现了自适应效果。希望这个答案对你有帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 下 iframe可不固定高度、无视跨域窗口高度自适应](https://blog.csdn.net/aj951225/article/details/122818132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]