zoukankan      html  css  js  c++  java
  • iframe自适应高度,兼容ie firefox chrome

    关于iframe自适应高度的解决方法在百度里能搜出上百篇文章,但多数解决方法都针对一个浏览器可以,无法兼容多个浏览器,查阅http://bbs.blueidea.com/thread-2902341-1-1.html博客,其中对多个浏览器的分析讲的很清晰,但对于作者使用window.setInterval("reinitIframe()", 200);在每个一段时间去改变高度,我觉得没必要,我的解决方法的是在iframe每次加载的时候改变高度:

    首先:调节iframe高度代码如下:

    function reinitIframe(){
     var iframe = document.getElementById("iframeID");
     
     try{
     var bHeight = iframe.contentDocument.body.scrollHeight;
     var dHeight = iframe.contentDocument.documentElement.scrollHeight;
     var height = Math.max(bHeight, dHeight);
     iframe.height =  height;
     }catch (ex){}
     }

    代码很简单,就是去获取iframe内容的高度,网上很多方法用iframe.document.body.scrollHeight 和 iframe.document.documentElement.scrollHeight获取iframe内容高度,这中方法在firefox和chrome中执行错误,你可以在catch中获取异常。所以使用iframe.contentDocument.body.scrollHeight在多个浏览器中都能正确获取到iframe内容的高度。

    接下来就是在iframe加载后调用reinitIframe();改变iframe高度,代码如下:

    <iframe src="user_manage.html" width="100%" frameborder="0" id="iframeID" name="iframeID" scrolling="no" onload="reinitIframe();")></iframe>

    就这样,iframe就能自适应高度了(注:这是在不跨域情况下。)

    大家如发现什么什么错误,请指正,感激不尽!!也欢迎大家一起学习交流。

  • 相关阅读:
    poj 2485 Highways 最小生成树
    hdu 3415 Max Sum of MaxKsubsequence
    poj 3026 Borg Maze
    poj 2823 Sliding Window 单调队列
    poj 1258 AgriNet
    hdu 1045 Fire Net (二分图匹配)
    poj 1789 Truck History MST(最小生成树)
    fafu 1181 割点
    减肥瘦身健康秘方
    人生的问题
  • 原文地址:https://www.cnblogs.com/liveandevil/p/2871636.html
Copyright © 2011-2022 走看看