请问FF下如何取得IFRAME的scrollHeight?
为了自适应高度,需要取得IFRAME的scrollHeight。
只是在FF下,取得的值明显要小,不正确,不知道是何原因。
有兄弟姐妹知道吗?或者有其它方法取得IFrame的内容高吗?
讨论讨论。
在下一向喜欢自己动手解决问题,极少提问,今比较急,没时间好好研究,只好请教各位了。
高分送上。
谢谢。
注,页面带:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
[解决办法]
看看这个
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);
[解决办法]
mark up
[解决办法]
document.body.scrollHeight直接取应该就行了
[解决办法]
var o=window.parent.document.getElementById( "frameContainer ");
if (o)
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
直接这样呢?
[解决办法]
在网上找到的一个解决办法:
<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%就会使代码失效。
[解决办法]
另外试试style 对象的 posHeight , pixelHeight ,offsetHeight 有好使的没?
我这没ff,试不了
[解决办法]
不要用body
用documentElement.scrollHeight;
[解决办法]
带 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
的话。。
用documentElement没有误差。。
Iframe自适应高度。。
window.parent.document.getElementById(window.name).height = document.documentElement.scrollHeight;
[解决办法]
忽忽。。
草人前辈好久不见的说。。
WC1.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>
</head>
<body>
<iframe id= "wc " name= "wc " src= "wc2.asp "> </iframe>
</body>
</html>
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>
<style type= "text/css ">
body {
margin:0px;
height:100%;
max-height:100%;
}
</style>
<script type= "text/javascript ">
window.onload = function () {
window.parent.document.getElementById(window.name).height = document.documentElement.scrollHeight;
}
</script>
</head>
<body>
<hr />
</body>
</html>
[解决办法]
直接用
document.frames[name].document.documentElement.scrollHeight
[解决办法]
我们来看看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 ">
<!--
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName( "IFRAME ");
for(var i=0; i <a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
a[i].parentNode.style.height = a[i].offsetHeight + "px ";
a[i].style.height = "10px ";
if(document.documentElement&&document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = a[i].parentNode.style.height = h + "px ";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent( "onload ", iframeAutoFit);
//window.attachEvent( "onresize ", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener( 'load ', iframeAutoFit, false);
//window.addEventListener( 'resize ', iframeAutoFit, false);
}
//-->
</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> 高度的函数,产生了死循环调用。
[解决办法]
不是吧?
我正在用我写的那个方法啊。。
注意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>