总体思路是这样的，因为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高度根据自身内容高度自适应的更多相关文章

  1. wordpress页面F12时源码多出的内容在index.php header.php找不到

    wordpress页面按F12时源码多出的内容在index.php header.php找不到 比如类似这样的内容: <div style="position:absolute;fil ...

  2. textarea的高度随内容变化而变化

    <li class="text"> <span>参赛宣言*</span> <textarea name="txt" i ...

  3. 页面嵌套 Iframe 产生缓存导致页面数据不刷新问题

    最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息. 初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳.这样能 ...

  4. 一键切换皮肤的解决思想及iframe嵌套时寻找下级iframe的方法

    项目中有个一键切换皮肤的功能,感觉还不错,记录下,就是各颜色样式设置起来太复杂了,不知道有没有更简便的方法: 1.切换皮肤结构层 <li title="<s:text name= ...

  5. iframe标签（页面嵌套）

    本文链接:https://blog.csdn.net/weixin_44540236/article/details/92760494 两个不同的页面但是它们的基本框架都是一样,每点击一次左边的导航栏 ...

  6. iframe的内容增高或缩减时设置其iframe的高度的处理方案

    WEB管理软件往往是如下结构的 用户点击子页tab切换中部的显示内容,在切换过程中需要保证前面的子页保持先前的状态.这种情况一般都使用iframe来来作为切换的子页显示内容. 但是这里有一个问题,if ...

  7. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  8. django 重定向如何解决iframe页面嵌套问题

    出现问题背景:从登录页进入到首页后,如出现后台重启或者用户清除cookie,或者session过期,token验证等问题,会重定向到登录页.由于使用的是iframe,出现登录页面嵌套在首页框架下.很是 ...

  9. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

随机推荐

  1. 使用dockers安装MySQL

    事前准备 关闭selinux setenforce 0 vim /etc/sysconfig/selinux SELINUX=disabled # 若不关闭,使用docker启动mysql5.7镜像容 ...

  2. idea 中 下载源码：Sources not download for:

    使用idea 下载源码出现:Sources not found for: 解决方案:在对应的pom.xml 文件中打开 terminal,执行 mvn命令: mvn dependency:source ...

  3. MySQL绿色版mysql-5.7.17-winx64简洁安装教程

    1.解压MySQL绿色版,复制my-default.ini,修改名称为my.ini 2. 以下为my.ini文件 # For advice on how to change settings plea ...

  4. 基于【 责任链模式】二 || 网关zuul过滤器封装

    一.基于责任链模式封装网关拦截 上一篇文章中已经使用建造者模式对网关拦截进行封装,存在一个问题,在连接器build中,每一个拦截都要进行true判断,代码看起来冗余,下面使用责任链模式封装 1.基于责 ...

  5. 关于lock和synchronized的选择

    这里不介绍具体用法,介绍lock和synchronized的不同从而做出选择 1.lock是一个接口,而synchronized是java中的一个关键字,synchronized是内置的语言实现. 2 ...

  6. Python opencv提取视频中的图片

    作者:R语言和Python学堂链接:https://www.jianshu.com/p/e3c04d4fb5f3 这个函数就是本文要介绍的video2frames()函数,功能就是从视频中提取图片,名 ...

  7. 13. 请看TED 的演讲, 谈谈你对压力的看法，以及怎么和别人合作， 帮助别人，把压力转化为动力，在互相帮助的环境中成长。------------答题者：徐潇瑞

    看了ted的演讲,我觉得压力就像一根弹簧,有多大的压力,它就有多大的弹力:现实中只要你学会用一种永远不服输的顽强精神,去对待人生和社会中遇到的一切困难与挫折,宠辱不惊的看云卷云舒,悟潮起潮落.可是存在 ...

  8. 优化你的HTTPS（上），你需要这么做

    HTTP/2 HTTP 2.0即超文本传输协议 2.0,是下一代HTTP协议.是由互联网工程任务组(IETF)的Hypertext Transfer Protocol Bis (httpbis)工作小 ...

  9. fastJson在java后台转换json格式数据探究（二）--处理数组/List/Map

    作者:buster2014 推荐:长安散人 fastJson在java后台转换json格式数据探究(二)--处理数组/List/Map JSON字符串与Java对象的转换 1.将Java对象或Java ...

  10. python - pycharm 配置虚拟环境出现的中文命名问题

    说一个困扰我很久的问题,当使用 pycharm 配置新的虚拟环境想要与之前的环境隔离的时候,正常的点击 New Project 创建项目时,不勾选 Inherit global site-packag ...