zoukankan      html  css  js  c++  java
  • html之小积累-.-iframe自适应高度

      在做系统框架的时候,常常会用到iframe,当需求是iframe不能出现纵向滚动条,需要根据加载页面的高度,一致延伸,但是iframe的高度自适应问题比较麻烦,当时也是纠结了好久。
      方案1:当遇到iframe里面嵌套的页面(后面简称内页),内页的高度不会变化,就是只是第一次加载的时候需要自适应的话,只要设置iframe就行了,兼容ie6+、谷歌。
      eg:<iframe src="<c:url value='/role/edit.do'/>" id="iframe_content" onload="this.height=iframe_content.document.body.scrollHeight" class="iframe-content" name="iframe_content" frameborder="0" width="915" height="100%" scrolling="no" ></iframe> 
      方案2:如果遇到情况比较恶心,在第一次加载完iframe的高度后,内页的高度还是会变动,这个时候,只有去实时去监听内页的高度,如果内页的高度改了,再通过js重新设置iframe的高度。
      eg:
        function setHeight() {

          var iframe = document.getElementById("iframe_content");
          try {
             var aHeight = iframe.contentWindow.document.body.scrollHeight;
             var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;
             var height = Math.min(aHeight, bHeight);//取最高值;
             iframe.height = height;
          } catch (e) {}
        }
        window.setInterval("setHeight()", 200);

      总结:其实方案1的原理是在加载内页的时候将高度计算出来,再设置iframe的高度。方案2就是需要去监听内页,再设置iframe的高度。当然,还是建议大家能不用iframe,就不用iframe。如果有更好的iframe的自适应高度解决方案,欢迎给我留言,一起交流,一起进步!

  • 相关阅读:
    表单提交原来是这句 return啊
    jquery控制table列.rar
    iframe 大数据量传参 本地能调用远程页面 不存在跨域问题 js组件调用原理
    public string GetUrltoHtml(string Url)
    一个xml转html的小程序 别人一个毕业设计【难度:简单】
    铭万轮换广告组件
    C#操作 ini文件类【转】
    捕捉浏览器的刷新与关闭 兼容ie、ff(火狐)
    列表循环 float:left marginright:10px 如何对齐右边距小技巧
    access 双表连接代码
  • 原文地址:https://www.cnblogs.com/pijiaxiang/p/4484190.html
Copyright © 2011-2022 走看看