完美iframe高度自适应代码
方法1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
background:url(http://voice.qq.com/love/images/page_bg.gif);
font-family: "Verdana";
font-size: 12px;
margin: 0;
}
.fontred {color: #F00}
-->
</style>
</head><body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">
<tr>
<td height="200" align="center" valign="middle"><br><strong>页面内容区域</strong><br />
<br />
<span class="fontred"><strong>注:</strong>onload字段中的数值“200”为设置的Iframe最低高度值!</span><br />
<br />
<a href="/myfile/test/shortpage.htm" target="content">Iframe显示短页面</a> <a href="/myfile/test/longpage.htm" target="content">Iframe显示长页面</a></td>
</tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">
<tr>
<td align="center" valign="top"><iframe src="/myfile/test/shortpage.htm" name="content" id="content" allowtransparency="true" align="default" marginwidth=0 marginheight=0 frameborder=0 scrolling=no height="200" width="500" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>200?fdh:200)//code by Backley">This message is only visible to older browsers.</iframe></td>
</tr>
</table>
</body>
</html>
方法2:
<iframe src="pro_vew.asp" frameborder="0" scrolling="no" name="main" onload="init();" width="100%" height="100%" align="top"></iframe>
<script language="javascript">
var lastHeight;
function aaa()
{
document.all('main').height=main.document.body.scrollHeight;
}
function init()
{
aaa();
setInterval(function (){
if (lastHeight!=main.document.body.scrollHeight)
aaa();
},2)
}
</script>
方法3:
<div style="border:1px solid #7e99c6" id="frameBox">
<iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe>
</div>
js脚本(加在主页面):
function test2(){
var frameWin = document.getElementById("frameWin");
var frameBox = document.getElementById("frameBox");
var newHeight;
if (frameWin.Document){
newHeight = frameWin.Document.body.scrollHeight + 20 + "px";
}else{
newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
或者 newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + "px";
}
frameWin.style.height = newHeight;
frameBox.style.height = newHeight;
}
方法4:
<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" scrolling="no" src="http://bbs.blueidea.com/thread-2861982-1-1.html"></iframe>
<!--重要提示:src填写的网页地址一定要和本页面在同一个站点上,否则会报错“拒绝访问!”-->
- 没有评论