自适应页面高度

最新推荐文章于 2023-12-07 00:22:25 发布

转载最新推荐文章于 2023-12-07 00:22:25 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jetz/archive/2007/04/02/696975.html

文章标签：

#嵌入式 #javascript #ViewUI

      困扰了我很久的问题：我很想让一个框架左侧的菜单（控件或者是折叠的LI或者别的），能够自动适应浏览器的变化。因为即使是同一分辨率，页面中的实际高度也不同。不过非常遗憾，网上的文章可谓无数，但基本都不能解决问题。基本上是这两类：
      1、页面中嵌了IFrame，希望Iframe不出现滚动条，大小刚刚和页面大小一样，这个基本方法，都是用页面的document.body.scrollHeight属性来完成的。其实我也是用Iframe，因为我的折叠菜单是用css+div实现的，没法用滚动条，所有我用一个Iframe来装它，当菜单过长时，由Iframe来显示滚动条。所以我需要的刚好相反：我要让Iframe的大小刚好等于浏览器页面的大小。
      理论上讲，document.body.clientHeight可以解决这个问题，但实际上不行。
      2、基本讲的都是用CSS来自适应页面高度，这里不是这个问题。
      最后，还是在cnblogs上找到了答案：
      http://dflying.cnblogs.com/archive/2006/03/27/360145.aspx
      不由得再次感叹：一千个copy的长篇大论，不如原创的一句话!
我的代码：

< SCRIPT LANGUAGE = " JavaScript " >

function window.onload()

{

document.getElementById("I1").height=document.documentElement.clientHeight;

document.getElementById("I1").width=document.documentElement.clientWidth;

//document.getElementById("I1").width=240; //document.getElementById("I1").contentWindow.document.body.scrollHeight

}

</ SCRIPT >

参考：控制IFrame大小，不显示滚动条的方法

使用JS代码，方法有二：

1。

function   window.onload()
{
parent.document.all("I1").style.height=document.body.scrollHeight+15;
parent.document.all("I1").style.width=document.body.scrollWidth+10;
}

2。

function   window.onload()
{
        window.resizeTo(document.body.scrollWidth+10,document.body.scrollHeight+10);
}
</script>

方法一的显示效果很好，但由于需要和主页面通信（parent……），对于一些将主页面和嵌入式页面放在不同主机的用户来说，就不能使用了，因为这是一个跨域访问

方法二是一种不错的办法，但由于不需要和主页面通信，当主页面显示速度很快时，嵌入式页面的JS代码可能不起作用。于是，我修改了方法二：

<script   language="Javascript">
      var   times=0;
      function   window.onload(){
          resize=window.setInterval("resizenow();",1000);
      }

      function   resizenow(){
          window.resizeTo(document.body.scrollWidth+10,document.body.scrollHeight+10);
          if(++times>10){
              clearInterval(resize);
          }
      }
</script>

转载于:https://www.cnblogs.com/jetz/archive/2007/04/02/696975.html