Jump to navigation

You are currently browsing all posts tagged with 'iframe'

使用js自动调整iframe高度

  • Posted on February 24, 2010 at 9:12 am

百度了一下,发现了最简单的方法:

在被iframe的页面最后,加一行JS:

window.parent.document.getElementById("fang_list_iframe").style.height=document.body.scrollHeight;

经过测试,发现在主页面含有

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

时,IE可以,FF无效。

这个时候人都变得傻X了,竟然想去修改这个DOCTYPE…

虽说把DOCTYPE改成

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

之后,IE和FF都生效了,但是在IE下面,页面布局都变了。。

最后发现,竟然,要这样写才可以:

window.parent.document.getElementById("fang_list_iframe").style.height=document.body.scrollHeight+"px";

看来还是由于自己的JS写得不够规范。。

好了,下面贴出完整代码:

<script>
 window.parent.scrollTo(0,0);
var mainIFrame = window.parent.document.getElementById("fang_list_iframe");
var scrollHeight = parseInt(document.body.scrollHeight);
var offsetHeight = parseInt(document.body.offsetHeight);
var hight;
var isIE = document.all && window.external;
if( isIE )
 hight = scrollHeight;
else
 hight = scrollHeight < offsetHeight?scrollHeight:offsetHeight;

var sUserAgent = navigator.userAgent;
var isChrome = sUserAgent.indexOf("Safari") > -1 ;
if( isChrome)
 hight = hight + 80;
mainIFrame.style.height=hight+"px";
</script>

Top