iframe自适应窗口宽高

北寂.

于 2021-11-20 15:40:16 发布

阅读量1.7k

点赞数

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45059900/article/details/121440391

版权

本文探讨了如何在前端项目中使用JavaScript实现iframe根据内容自动调整其宽度和高度，确保iframe内容完整显示，解决了跨域及动态加载内容的适配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中的代码

<title>数据汇总</title>
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/all.css" media="all">
    <!-- <link rel="stylesheet" href="{{ layui.setter.base }}style/dataGather.css" media="all"> -->
    <link rel="stylesheet" href="{{ layui.setter.base }}style/screen.css" media="all">
</script>

<div>
	<iframe id="myfream" src="https://www.baidu.com/?tn=88093251_83_hao_pg" frameborder="0"></iframe>
</div>

<script>
	autodivheight();
function autodivheight(){ //函数：获取尺寸
    //获取浏览器窗口高度
    var winHeight=0;
    if (window.innerHeight){
        winHeight = window.innerHeight;
    }
    else if ((document.body) && (document.body.clientHeight)){
        winHeight = document.body.clientHeight;
    }
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight){
        winHeight = document.documentElement.clientHeight;
    }
    //DIV高度为浏览器窗口的高度
    //document.getElementById("test").style.height= winHeight +"px";
    //DIV高度为浏览器窗口高度的一半
    document.getElementById('myfream').style.height= winHeight/2 +"px";
}
window.onresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度

// document.getElementById('myfream').style.height=document.documentElement.clientHeight+'px';
// document.getElementById('myfream').style.width=document.documentElement.clientWidth+'px';
//加载 controller 目录下的对应模块
layui.use('bridgeSystem', layui.factory('bridgeSystem'));
</script>

<style lang="less" scoped>
	iframe{
		width: 100%;
		/* height: 100%; */
	}
</style>