专栏首页听雨堂自适应页面高度

自适应页面高度

      困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的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>     

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我的Js代码-按钮按下时判断是否选择了最后一行,给出提示

    <script language="javascript"> <!-- function onsub() { /...

    用户1075292
  • 让控件填满整个页面

    一般用于左侧的Frame,比如左侧放了一个树控件。用<body onload="FillPage('FlyTreeView1')" scroll=no>调用即可...

    用户1075292
  • 使用正则表达式求完整路径中的文件名

          以前都是比较恶心的算法,找字符串中的最后一个"\",再求出末尾的文件名。现在好啦,用.net中的正则表达式,可以非常漂亮的完成。    usin...

    用户1075292
  • javaScript的常见document对象

    对象属性 document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 docume...

    botkenni
  • js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==>...

    似水的流年
  • js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对...

    似水的流年
  • js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BOD...

    似水的流年
  • JavaScript基础学习--零碎

    1、如果WINDOW对象是常规HTML页面,TOP就是SELF       var top = document.getElementById('top'); ...

    用户1148399
  • angular js踩坑日记

    异常情况菜单栏展示.png 异常出现情况是我手动的去刷新了页面哈(菜单栏不用每次拉取)。

    用户5166330
  • (weex eros)在cmd窗口运行 eros init 创建项目的时候一直卡在 downloading template 一直卡着不动

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    acoolgiser

扫码关注云+社区

领取腾讯云代金券