iframe的高度自适应
时间: 2023-08-26 12:11:53 浏览: 115
iframe src为图片时的高度自适应的代码
5星 · 资源好评率100%
要实现iframe的高度自适应,可以使用JavaScript来动态设置iframe的高度。一种常见的做法是通过获取内嵌网页的内容高度,然后将iframe的高度设置为内容高度。可以使用以下代码实现:
```javascript
<script type="text/javascript">
function changeFrameHeight(){
var iframe = document.getElementById("myiframe");
iframe.height = iframe.contentDocument.body.clientHeight;
}
window.onresize = function(){
changeFrameHeight();
}
</script>
```
这段代码会在窗口大小发生变化时自动调用`changeFrameHeight`函数,将iframe的高度设置为内容的高度。这样就可以实现iframe的高度自适应了。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [iframe高度宽度自适应](https://blog.csdn.net/m0_38082271/article/details/79226327)[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^chatsearchT0_1"}} ] [.reference_item]
- *2* [6种iframe高度自适应的方法](https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/114714412)[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^chatsearchT0_1"}} ] [.reference_item]
- *3* [iframe的高度自适应](https://blog.csdn.net/xiaozhuangyumaotao/article/details/105588135)[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^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]
阅读全文