iframe自适应高度(有用哦)

最新推荐文章于 2021-04-17 21:06:00 发布

tandaly

最新推荐文章于 2021-04-17 21:06:00 发布

阅读量905

点赞数

分类专栏：常见问题

本文链接：https://blog.csdn.net/tandaly/article/details/9250345

版权

常见问题专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天在编写html页面的时候，遇到在ie浏览器下iframe无法自适应高度，但是chrome怎么弄都行，为了解决ie这个不能自适应的问题，我费了好大的劲儿，又是百度又是谷歌的，折腾了我好一阵子，也尝试了好多方法，但还是不行。最后经过不懈的斗争，对网友的代码改改，嘿，还真行了。特此记录一下，免得以后又遇到这样蛋疼的问题。

在修改页面过程中，我发觉和html文档定义标准也有出入。

第一种方法，如果文档头定义为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
</html>

这个ie就能自适应了，但是我在项目中用到了dialog插件，又不兼容这个插件，无奈，放弃了。

第二种方法，文档头定义为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>

javascript代码如下：

<script type="text/javascript">
<!--
	var winWidth = 0;
	var winHeight = 0;
	function findDimensions() // 函数：获取尺寸
	{
		// 获取窗口宽度
		if (window.innerWidth)
			winWidth = window.innerWidth;
		else if ((document.body) && (document.body.clientWidth))
			winWidth = document.body.clientWidth;
		// 获取窗口高度
		if (window.innerHeight)
			winHeight = window.innerHeight;
		else if ((document.body) && (document.body.clientHeight))
			winHeight = document.body.clientHeight;
		// 通过深入 Document 内部对 body 进行检测，获取窗口大小
		if (document.documentElement && document.documentElement.clientHeight
				&& document.documentElement.clientWidth) {
			winHeight = document.documentElement.clientHeight;
			winWidth = document.documentElement.clientWidth;
		}
		// 结果输出至两个文本框
		document.getElementById("topFrame").height = winHeight - 2;//减2是避免初始化页面时出现滚动条
		//document.getElementById("topFrame").width= winWidth;//这句可要可不要，宽度它会自适应的
	}
	// 调用函数，获取数值
	window.onresize = findDimensions;
//-->
</script>

html代码如下：

<body style="margin: 0px;">
	<div style="width: 100%; height: 100%;">
		<iframe id="topFrame" name="topFrame" src="frame.do"
			style="margin: 0px;" frameborder="0" width="100%" height="100%" οnlοad="findDimensions();")></iframe>
	</div>
</body>

第三种方法（此方法适应于div的自适应高度，经测试，也可以用来iframe自适应）：

定义样式

<style type="text/css">
		html,body{height:100%;}
		#topFrame{
			height:auto!important; /*for ie6 bug and ie7+,moz,webkit 正确*/
			height:100%; /*修复IE6,all browser*/
			min-height:99%; /*for ie6 bug and ie7+,moz,webkit 正确*/
			background-color: green;
		}
	</style>

html代码：

<body style="margin: 0px;">
	<div style="width: 100%; height: 100%;">
		<iframe id="topFrame" name="topFrame" src="frame.do"
			style="margin: 0px;" frameborder="0" width="100%" height="100%"></iframe>
	</div>
</body>

Ok，解决了。希望能帮助遇到此类问题的朋友。

作者：Tandaly

出处：http://blog.csdn.net/tandaly/article/details/9250345

tandaly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe自适应高度(有用哦)

今天在写页面的是否，遇到在ie浏览器下iframe无法自适应高度，但是chrome怎么弄都行，为了解决ie这个不能自适应的问题，我费了好大的劲儿，又是百度又是谷歌的，折腾了我好一阵子，也尝试了好多方法，但还是不行。最后经过不懈的斗争，对网友的代码改改，嘿，还真行了。特此记录一下，免得以后又遇到这样蛋疼的问题。在修改页面过程中，我发觉和html文档定义标准也有出入。如果文
复制链接

扫一扫

专栏目录