zoukankan      html  css  js  c++  java
  • iframe动态大小的问题(未解决)

    有一个需求要根据iframe内部的内容大小来动态改变iframe的大小,也就是不想出现iframe滚动条,达到最好的用户体验。

    于是写了这样一个看似完美的方法来取得iframe内部内容的尺寸:

    var getContentSize = function () {
        var docEl = document.documentElement, body = document.body;
        return {
             Math.max(docEl.scrollWidth, body.scrollWidth),
            height: Math.max(docEl.scrollHeight, body.scrollHeight)
        };
    };
    

    然后使用setInterval来监视并同步iframe的大小:

    setInterval(function () {
        var size = getContentSize();
        iframe.style.width = size.width + 'px';
        iframe.style.height = size.height + 'px';
    }, 128);
    

    舒舒服服的用了一段时间,直到悲剧发生了:

    悲剧1...当iframe载入的页面中有一些绝对定位的元素,并且元素的位置始终会超出显示范围,也就是有隐藏的部分:

    div.test
    {
        position:absolute;
        right:-10px;
        bottom:-10px;
    }
    

    悲剧2...当iframe载入的页面中有css同时设置了html和body一样的width或height,也就是我们比较常见的css reset:

    html,body
    {
        height:100%;
        100%;
    }
    

    悲剧2可能比较不好理解,而且也不是一定会发生,以下是我自己的猜测:html和body标签同时设置了一样的尺寸后,因为body内嵌于html之内,body并有一定的先天的宽度和高度,这样body就始终会超出html一点点,达到了悲剧1的条件(当然了同时设置width/height=auto;是不会有问题的,auto是默认值)。

    这两个点为什么是悲剧呢?达到以上任意一个悲剧的条件后,每一次setInterval的处理函数执行后,iframe内部的尺寸都是始终不断的增加。。。

    正在寻求解决的办法中。。。希望有解决方案的朋友能提供帮助,先谢过了。

    浏览器没那么聪明!
  • 相关阅读:
    explain详解与索引最佳实践
    MySQL的配置文件
    MySQL索引数据结构红黑树,Hash,B+树详解
    elasticsearch 进阶
    淘宝服务端高并发分布式架构演进之路
    http请求的header的一个小细节
    一次解决idea maven settings.xml文件不生效
    SpringBoot dev-tools vjtools dozer热启动类加载器不相同问题
    spring boot eclipse 远程调试
    vscode 同步配置
  • 原文地址:https://www.cnblogs.com/rulee/p/2424683.html
Copyright © 2011-2022 走看看