zoukankan      html  css  js  c++  java
  • 兼容多浏览器的iframe高度自适应问题

    <iframe style="margin:0 auto;padding:0 auto; float:left;" onload="this.height=100" id="frame_content" name="frame_content" src="<{$start_url_html}>" scrolling="no" frameborder="0" width="775" height="900"  allowTransparency="true" style="_773px"></iframe>

    <script type="text/javascript">

    function reinitIframe(){
       var iframe = document.getElementById("frame_content");
        try{
      var bHeight = iframe.contentWindow.document.body.scrollHeight;
      var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
      var height = Math.max(bHeight, dHeight);
      iframe.height =  height +'px';
      if(navigator.appName == "Microsoft Internet Explorer"){
                if(navigator.appVersion.match(/6./i)=='6.'){
                      document.getElementById('mainpart').style.height = height +'px';
                }
      }
        }catch (ex){}
    }

    window.setInterval("reinitIframe()", 200);

    </script>

    如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值184,就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生,当从高的页面切换到矮页面的时候,取到的高度还是那个高的值。
    可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加 onload=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。

    这样子,基本解决了兼容性问题。顺便说下,不光绝对定位的层会影响到值,float也会导致两个值的差异。

  • 相关阅读:
    面试基础知识文档
    敏捷式开发
    redis总结
    自我介绍的问题
    面试2
    唐巧的iOS技术博客选摘
    IOS开发中滑动页面时NSTimer停止的问题
    iOS多线程GCD(转)
    iOS 用instancetype代替id作返回类型有什么好处?
    C语言中全局变量、局部变量、静态全局变量、静态局部变量的区别 (转)
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2831977.html
Copyright © 2011-2022 走看看