iframe怎么自适应高度（iframe在div中如何自适应高度）
本文目录
iframe在div中如何自适应高度
//window.onresize表示窗口触发时间的时候执行
//两个函数，用闭包包裹起来()()
window.onload=function(){
(window.onresize=function(){
//获取可见宽度
var width=document.documentElement.clientWidth-180;//180为左边的div的大小
//获取可见高度
var height=document.documentElement.clientHeight-80;//80为头部的div的大小可自己修改
//如果有宽度就给值，
if(width》=0){
document.getElementById(’main’).style.width=width+’px’;
}
if(height》=0){
document.getElementById(’sidebar’).style.height=height+’px’;
document.getElementById(’main’).style.height=height+’px’;
}
})()};
扩展资料：
//设置iframe的高度
function resizeFrameHeight() {
$(’.tab_iframe’).css(’height’, document.documentElement.clientHeight - 118);
$(’md-tab-content’).css(’left’, ’0’);
}
window.onresize = function () {
resizeFrameHeight();
initScrollShow();
initScrollState();
}
如何让iframe自适应高度
什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
更多文章：
issued retroactively（FORM E上盖“ISSUED RETROACTIVELY”的问题，小女在线等待）
2026年10月15日 10:30
2026年10月15日 10:10
begin和start的区别（start与begin的区别）
2026年10月15日 09:20
vant官网中文（范特365 是韩国化妆品VANT36.5吗）
2026年10月15日 09:10
2026年10月15日 08:10
2026年10月15日 07:30
prison break（越狱（prison break）到底是在讲个什么）
2026年10月15日 06:50
c程序设计第五版教学视频（求C程序设计（第五版）谭浩强教材源代码、视频课件等电子版资料！谢谢大家！）
2026年10月15日 06:40
2026年10月15日 06:20
十六进制转二进制表（16进制转为2进制、8进制、10进制的公式）
2026年10月15日 06:10
