iframe设置高度

设置iframe的高度为百分比时会失效解决

思路:我获取整个页面的高度,再减去其他标签的高度就可以得到iframe的高。

/* *** iframe高度初始化 *** */
$(function(){
	var topMenu = window.document.getElementById('topMenu'); //顶层菜单
	var ifm = document.getElementById("icontent"); //iframe
	var ifoot = document.getElementById("ifoot"); //脚部
	var icontentheader = document.getElementById("icontent-header");//其他影响高度的标签
	//设置iframe的高度 = 整个页面高度 -(顶层菜单高度+脚步高度+其他影响高度的标签)
	ifm.height = document.documentElement.clientHeight
				- topMenu.offsetHeight
				- ifoot.offsetHeight
				- icontentheader.offsetHeight;
});
/* *** 窗口大小监听
页面自适应实现,iframe应该随着浏览器 高度宽度 变化而变化
 *** */
window.onresize=function(){  
	var topMenu = window.document.getElementById('topMenu');
	var ifm = document.getElementById("icontent");
	var ifoot = document.getElementById("ifoot");
	var icontentheader = document.getElementById("icontent-header");
	ifm.height = document.documentElement.clientHeight
				- topMenu.offsetHeight
				- ifoot.offsetHeight
				- icontent-header.offsetHeight;
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置iframe高度自适应有多种方法。其中一种方法是使用JavaScript函数来动态调整iframe高度。在这个方法中,你可以使用iframe的onload事件和JavaScript函数来设置iframe高度。具体代码如下: 在iframe标签中添加onload事件和id属性: ``` <iframe width="778" align="center" height="200" id="win" name="win" onload="SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> ``` 然后在JavaScript中定义SetWinHeight函数,根据内容的高度设置iframe高度: ``` <script> function SetWinHeight(obj) { var win = obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) { win.height = win.contentDocument.body.offsetHeight; } else if (win.Document && win.Document.body.scrollHeight) { win.height = win.Document.body.scrollHeight; } } } } </script> ``` 另一种方法是使用iframe的onload事件和JavaScript函数来设置iframe高度。这种方法适用于多种浏览器,包括IE6/IE7/IE8/Firefox/Opera/Chrome/Safari。具体代码如下: 在iframe标签中添加onload事件和id属性: ``` <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()"></iframe> ``` 然后在JavaScript中定义iFrameHeight函数,根据内容的高度设置iframe高度: ``` <script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm = document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if (ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script> ``` 这些方法可以帮助你实现iframe高度自适应。通过在iframe标签中添加相应的事件和函数,根据内容的高度来自动调整iframe高度,从而实现高度的自适应。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值