本文作者:心月

js实现高度iframe高度自适应的4种方法【亲测有效】

心月IT博客 2019-12-04
js实现高度iframe高度自适应的4种方法【亲测有效】摘要:使用iframe放置嵌套页面如虽然可以通过css来设置固定高度,但如果页面的高度不能确定或者高度会变化在用css来设置高度就有点不太方便了,如果能够让iframe的高度自适应的话就可以不用担心这个问题了。

        使用 iframe 放置嵌套页面如虽然可以通过 css 来设置固定高度,但如果页面的高度不能确定或者高度会变化在用 css 来设置高度就有点不太方便了,如果能够让 iframe 的高度自适应的话就可以不用担心这个问题了。

iframe 默认固定高度

        通过 js 设置 iframe 高度自适应的方法还是挺多的,这里心月博主整理了4种比较好用的设置 iframe 高度自适应的方法。

第一种设置 iframe 高度自适应的方法:

设置高度自适应的 js 代码

        function setIframeHeight(iframe) {
                if (iframe) {
                    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                    console.log(iframeWin)
                    if (iframeWin.document.body) {
                        console.log(iframeWin.document.documentElement.scrollHeight)
                        console.log(iframeWin.document.body.scrollHeight)
                        iframe.style.height = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight) + 'px';
                        console.log(iframe.style.height)
                    }
                }
            };

        window.onload = function () {
            setIframeHeight(document.getElementById('form'));
        };

iframe

<iframe id="form" src="form.html"></iframe>

js实现高度iframe高度自适应

第二种设置 iframe 高度自适应的方法:

可以同时给多个 iframe 设置高度自适应

设置高度自适应的 js 代码

        // iframe组 只需把需要设置高度自适应的iframe的id放入 iframeids 数组中
        var iframeids=["survey_1"];
        //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
        var iframehide="yes";
        function dyniframesize(){
            var dyniframe=new Array()

            for (i=0; i<iframeids.length; i++){

                if (document.getElementById){
                    //自动调整iframe高度
                    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
                    if (dyniframe[i] && !window.opera){
                        dyniframe[i].style.display="block";
                        console.log(dyniframe[i].contentDocument)
                        console.log(dyniframe[i].contentDocument.body.offsetHeight)
                        if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){

                            dyniframe[i].style.height = (dyniframe[i].contentDocument.body.offsetHeight + 40) + 'px';
                        }else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){

                            dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
                        }
                    }
                    //根据设定的参数来处理不支持iframe的浏览器的显示问题
                    if ((document.all || document.getElementById) && iframehide=="no"){
                        var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
                        tempobj.style.display="block";
                    }
                }
            }
        }

        if (window.addEventListener){
            window.addEventListener("load", dyniframesize, false);
        }else if (window.attachEvent){
            window.attachEvent("onload", dyniframesize);
        }else{
            window.onload=dyniframesize;
        }

iframe

<iframe id="survey_1" src="survey_1.html"></iframe>

js实现高度iframe高度自适应


第三种设置 iframe 高度自适应的方法:

设置高度自适应的 js 代码

        function iframeAutoFit(iframeObj){
            console.log(iframeObj)
            setTimeout(function(){
                console.log(iframeObj)
                if(!iframeObj) return;
                iframeObj.style.height=((iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight) + 50)+ 'px';
            },200)
        }

        window.onload = function () {
            iframeAutoFit(document.getElementById("survey_2"));
        };

iframe 

<iframe id="survey_2" src="survey_2.html"></iframe>

js实现高度iframe高度自适应


第四种设置 iframe 高度自适应的方法:

设置高度自适应的 js 代码

        function reinitIframe(val){
            
            var iframe = document.getElementById(val);

            try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.style.height = height + 'px';

            }catch (ex){}
        }
        
        window.onload = function () {
            var id = 'survey_2';
            reinitIframe(id);
        };

iframe

<iframe id="survey_2" src="survey_2.html"></iframe>


【注意】

        这些方法只能对 iframe 加载的是同域名下的页面设置高度自适应,如果加载的是跨域页面,这些高度自适应设置方法不起作用。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-12-04
若转载请注明原文及出处:https://www.xinyueseo.com/biaoqian/544.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论