网站首页 think技术

iframe自适应高度

发布时间：2016-06-09 23:59查看次数：4304

iframe自适应高度

        应用场景:后台管理

        BUG类型:页面框架文件载入后高度不能自动使用溢出不显示

        解决方案:  让IFRAME的高度自动等于右边载入页面的高度,溢出后自动加高

        JS代码流程以及思路.

     1. 先给IFRAME加一个onload事件,事件结束后触发reininiframe() 方法!

      2.取得iframe.contentwindow的高度 以及位置高度 然后去一个最多值!

     3. 把这个最大高度设置成 iframe 的高度!  这样完成了初步加载 如果页面内突然插入比较大的图片溢出就不显示

     所以有了

    4.设置一个时钟!每秒检测一次,如果iframe内的载入页面发生变化高度发生变化 就改成自身的高度!


        JS代码:




var timer1 = window.setInterval("reinitIframe()", 500); //定时开始
    function reinitIframe(){
        var iframe = document.getElementById("iframepage");
        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){}
    }
    function reinitIframeEND(){
        var iframe = document.getElementById("iframepage");
        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.clearInterval(timer1);

    }