iframe自適應高度【框架自適應高度】

日期：2013-12-07 來源：攀枝花惠康網絡公司

iframe自順應高度傳統做法年夜致有兩個：
體例一，在每個被包含頁在自己內容加載完畢之后，執行JS取得本頁面的高度，然后去同步父頁面的iframe高度。
體例二，在主頁面iframe的onload事務中執行JS，去取得被包含頁的高度內容，然后去同步高度。
在代碼維護角度考慮，體例二是優于體例一的，因為體例一，每個被包含頁都要去惹人一段不異的代碼來做這個工作，建樹了良多若干好多副本。

可是碰著有些頁面會按照用戶的操作或者為了增添用戶體驗的時辰我們的頁面高度可能會增添。這就要求使用其他法子：我們可以用setInterval();

代碼如下：

XML/HTML代碼

<!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”><HEAD><TITLE>iframe自順應高度-demo</TITLE>
<META http-equiv=Content-Type content=“text/html; charset=GBK”>
<META content=“MSHTML 6.00.6001.18063″ name=GENERATOR></HEAD>
<BODY>
<DIV
style=“BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; WIDTH: 400px; BORDER-BOTTOM: 1px dotted”><IFRAME
id=frame_content src=“iframe_b.html” frameBorder=0 scrolling=no
onload=this.height=100></IFRAME></DIV>
<DIV><BUTTON onclick=checkHeight()>Check Height</BUTTON></DIV>
<SCRIPT type=text/javascript>
function reinitIframe(){
var iframe = document.getElementById(“frame_content”);
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight~~iframe.contentWindow.document.documentElement.scrollHeight;~~

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval(“reinitIframe()”, 200);

function checkHeight() {

var iframe = document.getElementById(“frame_content”);

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

alert(“bHeight:” + bHeight + ”, dHeight:” + dHeight);

}

</SCRIPT>

</BODY></HTML>

查看完整的演示：http://www.css88.com/demo/iframe/iframe.htm

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。