• 兼容多浏览器的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也会导致两个值的差异。

  • 相关阅读:
    shell
    RANDOM随机数
    docker网络管理
    Oracle-28001密码过期问题及28000账户被锁解决
    Oracle数据泵导入导出(expdb/impdb)
    mysql多实例部署
    sed命令基本使用
    MySQL5.7.x二进制安装
    每日日报
    每日日报
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2831977.html
Copyright © 2020-2023  润新知