• dh: 实现iframe 自适应高度的问题(初始化和动态加载数据的时候)


    //ifarme的呈现方式
     function InitIframeHtml(url) {
        $('#workarea').html("<iframe src=" + url + " frameborder='0' scrolling='no' width='800'  id='adminFrame'></iframe>");
    }
    
    //注意高度不要设置。
     
     

      

    function iframeAutoHeight() {
        if (window.addEventListener)
            window.addEventListener("load", iframeAutoFit, false);
        else if (window.attachEvent)
            window.attachEvent("onload", iframeAutoFit);
        else
            window.onload = iframeAutoFit;
    }
    
    document.iframeAutoFit = iframeAutoFit; 
    
    function iframeAutoFit() {
        if (window != parent) {
            var a = parent.document.getElementsByTagName("IFRAME");
            for (var i = 0; i < a.length; i++) {
                if (a[i].contentWindow == window) {
                    a[i].style.height = '50px';
                    var h1 = 0, h2 = 0;
                    if (document.documentElement && document.documentElement.scrollHeight)
                        h1 = document.documentElement.scrollHeight;
                    if (document.body)
                        h2 = document.body.scrollHeight;
                    var h = Math.max(h1, h2);
                    if (document.all)
                        h += 4;
                    if (window.opera)
                        h += 1;
                    a[i].style.height = h + "px";
                }
            }
        }
    }
    
    页面初始化的时候:
    $().ready(function() {iframeAutoHeight();  });
    动态加载数据的时候:
    iframeAutoFit();

      

     js 实现iframe 自适应高度 超级简单的方法:

    parent.document.getElementById("adminFrame").style.height = document.body.scrollHeight + "px";

    jquery 实现iframe 自适应高度 超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。

    下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。注意别放错地方了哦。 iframe代码,注意要写ID

    jquery代码1: //注意:下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); });

    jquery代码2: //注意:下面的代码是放在和iframe同一个页面调用 $("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheight); });

  • 相关阅读:
    201571030321 马玉婷 实验二 小学四则运算
    构建之法浅思
    个人学期总结
    201571030320/201571030335《小学四则运算练习软件软件需求说明》结对项目报告
    201571030320/201571030335《小学四则运算练习软件》结对项目报告
    201571030320+小学四则运算练习软件项目报告
    初读《构建之法》所思所问
    个人学期总结
    201571030318/201574010343《小学四则运算练习软件软件需求说明》结对项目报告
    201571030318/201574010343《小学四则混合运算》结队报告 马麒
  • 原文地址:https://www.cnblogs.com/dudu837/p/1783894.html
Copyright © 2020-2023  润新知