总体思路是这样的,因为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. Ubuntu install android studio

    Ubuntu install android studio 1. 安装 openjdk8,并在配置文件 /etc/profile 中,追加如下内容: sudo aptitude install ope ...

  2. 返回ArrayBuffer数据下载

    返回的数据 const blob = new Blob([response.data]); if ('download' in document.createElement('a')) { const ...

  3. [LeetCode] 95. 不同的二叉搜索树 II ☆☆☆(递归,n个数组成的所有二叉搜索树)

    https://leetcode-cn.com/problems/unique-binary-search-trees-ii/solution/xiang-xi-tong-su-de-si-lu-fe ...

  4. Docker Compose编排工具部署lnmp实践及理论(详细)

    目录 一.理论概述 编排 部署 Compose原理 二.使用docker compose 部署lnmp 三.测试 四.总结 一.理论概述 Docker Compose是一个定义及运行多个Docker容 ...

  5. linux-修改树莓派分辨率

    直接在树莓派下编辑 使用命令行来编辑配置文件 sudo nano /boot/config.txt 并在config.txt文件的最后加上以下代码即可 max_usb_current=1 hdmi_g ...

  6. scikit-learn中的机器学习算法封装——kNN

    接前面 https://www.cnblogs.com/Liuyt-61/p/11738399.html 回过头来看这张图,什么是机器学习?就是将训练数据集喂给机器学习算法,在上面kNN算法中就是将特 ...

  7. Paper Reading:Deep Neural Networks for YouTube Recommendations

    论文:Deep Neural Networks for YouTube Recommendations 发表时间:2016 发表作者:(Google)Paul Covington, Jay Adams ...

  8. G1垃圾收集器堆内存划分与角色分派【纯理论】

    接着上一次[https://www.cnblogs.com/webor2006/p/11123522.html]G1学习继续开启理论之旅.. G1的设计规划是要替换掉CMS[理想化的] G1在某些方面 ...

  9. P2280 [HNOI2003]激光炸弹[前缀和]

    题目描述 输入输出格式 输入格式: 输入文件名为input.txt 输入文件的第一行为正整数n和正整数R,接下来的n行每行有3个正整数,分别表示 xi,yi ,vi . 输出格式: 输出文件名为out ...

  10. JDK源码那些事儿之PriorityBlockingQueue

    今天继续说一说阻塞队列的实现,今天的主角就是优先级阻塞队列PriorityBlockingQueue,从命名上看觉得应该是有序的,毕竟是优先级队列,那么实际上是什么情况,我们一起看下其内部实现,提前说 ...