页面嵌套iframe时，怎样让iframe高度根据自身内容高度自适应

Posted fqh123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面嵌套iframe时，怎样让iframe高度根据自身内容高度自适应相关的知识，希望对你有一定的参考价值。

总体思路是这样的，因为iframe里页面的内容是动态加载的，而且电脑屏幕宽度发生变化时，也得相应的去改变iframe标签的高度（如果高度确定就不用这么麻烦了）；

首先，我们在父页面中定义一个方法，用来改变iframe标签的高度；在iframe中的页面中，当内容加载号之后去调用父页面汇总的这个方法（因为要根据内容自适应高度）；

然后再处理，当屏幕发生改变时，在子页面汇总调用父页面汇总的这个方法；

 

父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div>sdsd</div>
    <iframe src="./bb.html" scrolling="no" frameborder="0" id="test" style="width:100%;"></iframe>

    <script>
            function setIframeHeight(id){
                var iframe = document.getElementById(id);
                try{
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                    var height = Math.min(bHeight, dHeight);
                    iframe.height = height+20;
                }catch (ex){}
            }
            

    </script>
</body>
</html>

子页面中的代码：这里用一个定时器去模仿异步加载数据所产生的时间差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    我是内敛元素时
    <div id="test"></div>
    
    <script>
　　　　//模拟页面加载来的页面内容
        var html=`<p>达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所</p>`;
    
        var win=window;
        var doc=document;
        function ready(){
            document.querySelector("#test").innerHTML=html;//动态添加页面内容
            parent.window.setIframeHeight("test");//调用父页面中改变 iframe标签高度的方法
        }
        setTimeout(ready,1000);

        var processor={
                timeoutId:null,
                performProcessing:function(){
                    //实际执行的代码
                    parent.window.setIframeHeight("test")
                },
                process:function(){//函数节流
                    clearTimeout(this.timeoutId);
                    var that=this;
                    this.timeoutId=setTimeout(function(){
                            that.performProcessing();
                    },100);
                }
        }
        //使用 当窗口发生改变时调用
        window.onresize=function(){
            processor.process();
        }

        
        
    </script>
</body>
</html>

这里面用到了 函数节流  iframe中调用父页面方法的知识点

 

以上是关于页面嵌套iframe时，怎样让iframe高度根据自身内容高度自适应的主要内容，如果未能解决你的问题，请参考以下文章

DIV里嵌套Iframe，让Iframe及DIV高度一起随内容自适应高度问题

怎样让iframe中的内容的宽度和高度改变后，dialog的宽高自适应？

IOS不支持iframe的解决办法

怎么让iframe自适应浏览器的高度和宽度

被嵌套页面 如何得到iframe 高度

如何让iframe自适应高度