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

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。