博客

带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家几种iframe动态调整高度的方法。

1、

<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></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>

2、在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="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> 

3、兼容性更好一些的方法

<iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> 
</iframe>
<script language="javascript" type="text/javascript"> 
	function dyniframesize(down) { 
		var pTar = null; 
		if (document.getElementById){ 
			pTar = document.getElementById(down); 
		} else{ 
		eval('pTar = ' + down + ';'); 
		} 
		if (pTar && !window.opera){ 
			//begin resizing iframe 
			pTar.style.display="block" ；
			if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
				//ns6 syntax 
				pTar.height = pTar.contentDocument.body.offsetHeight +20; 
				pTar.width = pTar.contentDocument.body.scrollWidth+20; 
			} else if (pTar.Document && pTar.Document.body.scrollHeight){ 
				//ie5+ syntax 
				pTar.height = pTar.Document.body.scrollHeight; 
				pTar.width = pTar.Document.body.scrollWidth; 
			} 
		} 
	} 
</script> 
 

4、

<iframe id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></iframe> 
<script>
(function (doc, win) {
	parent.document.all("框架ID名").style.height=document.body.scrollHeight; 
	parent.document.all("框架ID名").style.width=document.body.scrollWidth; 
})(document, window);
</script>

5、实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象

<script type="text/javascript"> 
	//** iframe自动适应页面 **// 
	//输入你希望根据页面高度自动调整高度的iframe的名称的列表 
	//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
	//定义iframe的ID 
	var iframeids=["test"] 
	//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
	var iframehide="yes" 
	function dyniframesize() { 
		var dyniframe=new Array()；
		for (i=0; i<iframeids.length; i++) { 
			if (document.getElementById){ 
				//自动调整iframe高度 
				dyniframe[dyniframe.length] = document.getElementById(iframeids); 
				if (dyniframe && !window.opera) { 
					dyniframe.style.display="block" 
					if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) {//如果用户的浏览器是NetScape 
						dyniframe.height = dyniframe.contentDocument.body.offsetHeight; 
					}else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) {//如果用户的浏览器是IE 
						dyniframe.height = dyniframe.Document.body.scrollHeight; 
					} 
				} 
				
				//根据设定的参数来处理不支持iframe的浏览器的显示问题 
				if ((document.all || document.getElementById) && iframehide=="no") { 
					var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) 
					tempobj.style.display="block" 
				} 
			} 
		} 
		
		if (window.addEventListener) {
			window.addEventListener("load", dyniframesize, false) 
		}else if (window.attachEvent) {
			window.attachEvent("onload", dyniframesize) 
		}else {
			window.onload=dyniframesize 
		}
	}
</script> 

6、取得iframe属性src所指定的包含文档中内容的高度，然后用来设置iframe自身的高度，在iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置

<script language="javascript"> 
	//输入你希望根据页面高度自动调整高度的iframe的名称的列表 
	//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
	//定义iframe的ID 
	var iframeids=["test"]; 
	//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
	var iframehide="yes"; 
	function dyniframesize() { 
		var dyniframe=new Array() 
		for (i=0; i<iframeids.length; i++) { 
			if (document.getElementById) { 
				//自动调整iframe高度 
				dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
				if (dyniframe[i] && !window.opera) { 
					dyniframe[i].style.display="block"; 
					if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) {//如果用户的浏览器是NetScape 
						dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
					}else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){ //如果用户的浏览器是IE 
						dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
					} 
				} 
				//根据设定的参数来处理不支持iframe的浏览器的显示问题 
				if ((document.all || document.getElementById) && iframehide=="no") { 
					var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
					tempobj.style.display="block"; 
				} 
			} 
		} 
		if (window.addEventListener) {
			window.addEventListener("load", dyniframesize, false); 
		}else if (window.attachEvent) {
			window.attachEvent("onload", dyniframesize); 
		}else {
			window.onload=dyniframesize; 
		}
	}
</script> 

7、只针对知道的iframe的ID调用

function iframeAutoFit(iframeObj){ 
    setTimeout(function(){
	    if(!iframeObj)  return;
	    iframeObj.height=(iframeObj.Document?	iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);
    },200) 
}

这几个方法小编试了个遍，一个都不管用。以下小编亲测可行的方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
			}
		</style>
	</head>

	<body>


		<iframe id="mainiframe" width="100%" height="600" src="http://www.csdn.net/" frameborder="0" scrolling="auto"></iframe>

		<script>
			function changeFrameHeight() {
				var ifm = document.getElementById("mainiframe");
				ifm.height = document.documentElement.clientHeight - 56;
			}
			window.onresize = function() {
				changeFrameHeight();
			}
			$(function() {
				changeFrameHeight();
			});
		</script>

	</body>

</html>