iframe高度自適應解決方式

帶邊框的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>