zoukankan      html  css  js  c++  java
  • iframe 根据内容自适应高度-终极解决方案

    第一中方法:

    在子页面加载完毕的时候执行

    parent.document.getElementById("iframe").height=0;

    parent.document.getElementById("iframe").height=document.body.scrollHeight;


    第二中方法:

    在主页面 iframe onLoad 时间里面写

    function iframeLoad()
    {
        document.getElementById("iframe").height=0;
            
       document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
    }    

    第三种方法:

    使用js在页面加载完成后设置宽高度

    iframe

    <iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
           scrolling="no" height="100%" width="100%">
    </iframe>

    javascript

            window.onresize = function () {
                reinitIframe();
            }
            function reinitIframe(){
                var iframe = document.getElementById("menuFrame");
                try{
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                    var height = Math.min(bHeight, dHeight);
                    iframe.height = height+50;
                    // console.log(iframe.height);
                }catch (ex){}
            }
            // 定时触发
            window.setInterval("reinitIframe()", 200);
  • 相关阅读:
    HashMap、ConcurrentHashMap红黑树实现分析
    分布式系统ID
    分布式事务
    LRU算法实现
    Redis 深入
    分库分表利器——sharding-sphere
    Java常用的八种排序算法
    浅析Tomcat
    Kafka
    如何选择分布式事务形态
  • 原文地址:https://www.cnblogs.com/art-poet/p/13269559.html
Copyright © 2011-2022 走看看