总体思路是这样的，因为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中调用父页面方法的知识点
原文地址：https://www.cnblogs.com/fqh123/p/11684613.html
时间： 2024-09-30 09:21:08