请问FF下如何取得IFRAME的scrollHeight？

李睿_Lee 2007-04-13 12:53:54

为了自适应高度，需要取得IFRAME的scrollHeight。
只是在FF下，取得的值明显要小，不正确，不知道是何原因。
有兄弟姐妹知道吗？或者有其它方法取得IFrame的内容高吗？
讨论讨论。
在下一向喜欢自己动手解决问题，极少提问，今比较急，没时间好好研究，只好请教各位了。
高分送上。
谢谢。

注，页面带：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

...全文

1270 28 打赏收藏转发到动态举报

写回复

用AI写文章

28 条回复

切换为时间正序

请发表友善的回复…

发表回复

llm89721630 2011-09-29

打赏
举报

12楼的仁兄正解啊，帮了我很大的忙，谢谢！

jyyf_km 2008-04-02

打赏
举报

用document.documentElement.scrollHeight取的值不一定，有时为0，有时为其它值。

李睿_Lee 2007-04-19

打赏
举报

http://www.bantto.com
这个就是我完成的。
目前我暂时没发现问题了。也欢迎各位测试，提出问题。

muxrwc 2007-04-16

打赏
举报

不是吧？
我正在用我写的那个方法啊。。
注意WC2.asp那个过度的DTD不可以去掉，如果还有问题。。把你的预嵌套页的CODE放上来研究研究。。。就是=WC2.asp的这个页面的CODE。。
WC1.asp

<iframe id="wc" name="wc" src="wc2.asp" frameborder="0"></iframe>

WC2.asp

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>高度自己适应</title>
<script type="text/javascript">
window.onload = function () {
window.parent.document.getElementById(window.name).height = document.documentElement.scrollHeight;
}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
</body>
</html>

rjzou2006 2007-04-16

打赏
举报

我们来看看meizz写的

main.htm:

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' />
<title>iframe自适应加载的页面高度</title>
</head>

<body>
<div><iframe src="child.htm"></iframe></div>
</body>
</html>

child.htm:

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' />
<title>iframe 自适应其加载的网页(多浏览器兼容)</title>
<script type="text/javascript">

</script>
</head>
<body>
<table border="1" width="200" style="height: 400px; background-color: yellow">
<tr>
<td>iframe 自适应其加载的网页(多浏览器兼容，支持XHTML)</td>
</tr>
</table>
</body>
</html>

很多人反应在IE7里使用它会死机，那是因为在自适应高度时触发了 window.onresize 事件，而这个事件又去调用这个调整 <iframe> 高度的函数，产生了死循环调用。

ismycxp 2007-04-15

打赏
举报

直接用
document.frames[name].document.documentElement.scrollHeight

adverse 2007-04-15

打赏
举报

呵呵，楼主问题解决了，就先恭喜你了。

李睿_Lee 2007-04-15

打赏
举报

另外，我页面已经不存在问题，FF和IE（包括Maxthon）都能通过（其它的先不管了），下面纯属技术讨论了。
我这人比较喜欢弄个明明白白的。
大家继续发展意见。
还是那句话，不要只是贴一段不知道哪来的代码，要经过亲自实践，确认没问题，如果没有时间，请注明未经验证。
另外注意一点，是标准的Div+CSS布局（我感觉问题就在这），不是表格的堆砌。

李睿_Lee 2007-04-15

打赏
举报

ice_berg16(寻梦的稻草人) ( ) 信誉：125 Blog 加为好友 2007-4-13 13:43:59 得分: 0

不要用body
用documentElement.scrollHeight;

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
用事实说话，经过实验，在IE下，documentElement.scrollHeight取得的值始终比body.scrollHeight取得的一致；而在FF下，当第一次转入页面时，documentElement比Body的值少（有时相等），少多少，要看Div＋CSS里的CSS定义，没有一个定的数（具体有何规律，待有时间再研究，但我初步认为是容器div高的定义有关），但当点击页面的链接来改变IFrame里的页面时，如果新加载页面的documentElement.scrollHeight比上个页面的小，则取得的值会是上个页面的值。

附我的实验代码：

主页面代码：

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>Copmany</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="css/basic.css" rel="stylesheet" type="text/css">
<base target="mainFrame" />
<script language="javascript">
function changp(c){
//alert('p'+c.style.height);
c.parentNode.style.height=c.style.height;
}
<style type="text/css">
html {overflow-y:scroll;}
body {overflow-x:hidden;}
#Content {}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Top">
<div class="Logo"><img src="images/Logo.gif" alt="" width="196" height="79" border="0" usemap="#Map">
<map name="Map" id="Map"><area shape="rect" coords="15,59,176,78" href="" onmouseover="showMenu(1)" onclick=" return false;"/></map></div>
<div class="ADNav">
<div class="AD">
<div class="AD1"><img src="images/Top_01.gif" width="739" height="59" alt=""></div>
<div class="AD2"><img src="images/Top_02.gif" width="63" height="59" alt=""></div>
</div>
<div class="Nav"><ul>
<li><a href="products.asp" class="navs" style="padding-left:9px;">Products</a></li>
<li><a href="Events.asp" class="navs" >Press</a></li>
</ul>
</div>
</div>
</div>
<div id="Content">
<iframe src="profile.asp" id="mainFrame" name="mainFrame" width="1000" frameborder="0" scrolling="auto" height="440" onload="changp(this);"></iframe>
</div>

<div id="Btm">
<div class="logo2"><img src="images/Logo2.gif" width="90" height="23" alt="" /></div>
</div>
</body>
</html>

IFrame嵌入页面包含的js：
function changeIframeHeight() //自动改变 Iframe 的高度
{
if (top != self)
try
{
var h = document.body.scrollHeight;//documentElement
var h1=document.documentElement.scrollHeight;
alert('C:body:'+h+',de:'+h1)
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
var hpx = h1+'px';
window.parent.document.getElementsByTagName('iframe')[0].style.height = hpx;
}
catch(e)
{alert("脚本无法跨域操作！");}
}
if(document.attachEvent) window.attachEvent("onload", changeIframeHeight);
else window.addEventListener('load', changeIframeHeight, false);

李睿_Lee 2007-04-13

打赏
举报

谢谢楼上的兄弟。
我自己已经成功搞定了。
不过这才是FF和IE条件下的。
等下我下个其它常用的浏览器看看，行不行。
等都搞定了再发出来大家参考参考。

adverse 2007-04-13

打赏
举报

另外试试style 对象的 posHeight ， pixelHeight ，offsetHeight 有好使的没?
我这没ff,试不了

adverse 2007-04-13

打赏
举报

在网上找到的一个解决办法:
<table>
<tr><td><div id="leftMenu"></div></td>
<td id="frameContainer" ><iframe scrolling="no" frameborder="no" name="main"></td></tr>
</table>

设想是让iframe里面的页面去改变父窗口的iframe的高和宽。</p><p>以下是第一次尝试：

function dyjustifyframe()
{
var o =window.parent.document.getElementsByName("main")[0];
o.height= document.body.scrollHeight;
o.width = document.body.scrollWidth;
}

把function dyjustifyframe()放在iframe中嵌套的子页面里，让子页面的body onLoad="dyjustifyframe()"。但是iframe并没有height和width属性，所以上面不能这样写。于是找到第二个方法。用修改 iframe 上级的table的大小来间接改变其大小。先给iframe加上

style="width:100%;height:100%"
使其随着外面table的大小改变而改变。于是把 dyjustifyframe()改成：

function dyjustifyframe()
{
var o=window.parent.document.getElementById("frameContainer");
if (o)
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
}
上面的代码在ie中没问题，但在ff中调试时发现子页面的长度超出屏幕的话scrollHeight就只能变大不能变小，所以如果从一个长页面转到一个短页面的话父页面的长度不会改变。所以还需要修改一下。

function dyjustifyframe()
{
var o= window.parent.document.getElementById("frameContainer");
if (o)
{
if (navigator.appName == "Netscape")
{
o.height = document.body.offsetHeight + 40;
o.width = document.body.offsetWidth + 20;
}
else
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
}
}

要确保显示正常，还需要保证 frameContainer和leftMenu外面的td的大小没被设定，此外body的height必须是默认的auto，如果body是100%就会使代码失效。

adverse 2007-04-13

打赏
举报

var o=window.parent.document.getElementById("frameContainer");
if (o)
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
直接这样呢?

jacklinchen 2007-04-13

打赏
举报

document.body.scrollHeight直接取应该就行了

李睿_Lee 2007-04-13

打赏
举报

我发现你那代码，不是取得的高值不对，而是IFrame的高根本没有改变成功。
不过因此我发现了另一个郁闷的问题，昨天晚上我也是用document.body.scrollHeight取的，怎么值就不对呢？今天早上看了你这代码，我又把昨天晚上的重试了下，值又是对的了，狂倒。。
但FF里如何根据这个用脚本来重设本IFrame的高呢？用adverse(King)的.style.height是不行了，没作用。
继续讨论。。。。
我也继续实验去。

李睿_Lee 2007-04-13

打赏
举报

回：adverse(King)

你那代码在FF下，还是不能实现，高还是差了点，还会出现滚动条。
不过还是谢谢了。我看看能不能在你这基础上改改。

mh_rock 2007-04-13

打赏
举报

mark up

adverse 2007-04-13

打赏
举报

看看这个
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //
{
if(a[i].contentWindow==window)
{
var h = document.body.scrollHeight;
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = h;
}
}
}
}
catch (ex)
{
alert("脚本无法跨域操作！");
}
}
if(document.attachEvent) window.attachEvent("onload", iframeAutoFit);
else window.addEventListener('load', iframeAutoFit, false);

李睿_Lee 2007-04-13