无JS一:
1。去除对DOCTYPE声明的依赖,有无或不同声明皆有相同效果
2。代码简洁,直接在Iframe的onload标签中添加代码,无需对被调用页面添加代码
注:Iframe页面和被嵌入页面必须是相同域下面的页面,否则由于浏览器安全限制会出现javascript错误,提示没有权限!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< meta http-equiv="Content-Language" content="zh-cn">
< title>www.flyso.cn--完美Iframe高度自适应代码</title>
< 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/sample/shortpage.htm" target="content">Iframe显示短页面</a> <a
href="myfile/sample/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/sample/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 FLYSO
Blog">This message is only visible to older browsers.</iframe></td>
</tr>
< /table>
< table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">
<tr>
<td align="center"></td>
</tr>
< /table>
< /body>
< /html>
无JS二:
<iframe name="pindex" src="flyso.asp" scrolling="no" width="98%" height="100%" frameborder="no" onload="document.all
['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>
有JS一:
解决iframe框架页面自适应高度问题代码如下,需要注意的是框架引用页面一定要设置name属性,否则会不生效
注意:iframe页面动态内容如果用div方式实现,自适应高度不稳定,改成table方式实现,解决问题
<iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj"></iframe>
test.asp页面head间增加如下JS代码
<SCRIPT LANGUAGE="JavaScript">
function f_frameStyleResize(targObj){
var targWin = targObj.parent.document.all[targObj.name];
if(targWin != null) {
var HeightValue = targObj.document.body.scrollHeight
if(HeightValue < 600){HeightValue = 600}
targWin.style.pixelHeight = HeightValue;
}
}
function f_iframeResize(){
bLoadComplete = true; f_frameStyleResize(self);
}
var bLoadComplete = false;
window.onload = f_iframeResize;
</SCRIPT>
有JS二:
<script type="text/javascript">
var iframeids=["myblog"]
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
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)
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight)
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
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>