zoukankan      html  css  js  c++  java
  • iframe高度自适应的实现

    一、背景:

      这个应用的地方太多了,到百度搜索解决方法一大堆,但是真正可以实现的却很少,在asp.net中新增一个页面的时候会自动生成一行代码(如下)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      在这个标准下很多解决方法都会失效,具体为什么在这里不做叙述,只说解决办法。

    二、代码如下:

    <div>
    <iframe id="iframe_item" width="100%" name="iframe_item" src="XXXXX.aspx"
    scrolling
    ="no" frameborder="0" onload="this.height=100"></iframe>

    <script type="text/javascript">
    function reinitIframe() {
    var iframe = document.getElementById("iframe_item");
    try {
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    var height = Math.max(bHeight, dHeight);
    iframe.height
    = height;
    }
    catch (ex) {
    }
    }
    window.setInterval(
    "reinitIframe()", 200);
    </script>

    </div>

    解释:页面加载的时候给个初始高度,之后动态获取嵌入帧的高度以达到自适应的效果,很多人会怀疑效率问题,在这里可以告诉大家几乎没有任何影响。cpu和内存的使用率没变化。对于那些喜欢在这种问题上纠结的人,或者是过分追求性能的程序员不建议使用。希望对有些人有帮助把。。。。,有问题请留言。。。。

  • 相关阅读:
    jQuery之防止冒泡事件
    jQuery复制节点
    jQuery查找节点
    jQuery表单选择器
    jQuery之事件触发trigger
    jQuery样式操作
    为FLASH正名!HTML5前景分析
    iframe 高度自动调节,最简单解决
    Iframe和母版页(.net)
    表单遮住弹出层解决方法(select遮住DIV)
  • 原文地址:https://www.cnblogs.com/lihaibo/p/2205626.html
Copyright © 2011-2022 走看看