分享好友 教程首页 教程搜索 频道列表

iframe自适应高度(随内容高度变化)

2021-12-04 22:143280
+关注2
核心提示:iframe自适应高度

方案1、

HTML

<!--内容部分-->
<div class="con">
  <iframe id="mainFrame" name="mainFrame" sr c="main.html" style="width:100%;" frameborder="0" scrolling="no" onLoad="this.height=100" ></iframe>
</div>


写在同一页面上的JS

$(function () {
    //时间控制每隔200毫秒检查当前页面高度以及滚动高度,测试多遍,cpu占用极少,不明显影响程序运行速度
    window.setInterval("reinitIframe()", 200);
})
//iframe自适应高度,解决了动态更换页面高度无法自适应问题
function reinitIframe() {
    var iframe = document.getElementById("mainFrame");
    try {
        //bHeight 和 dHeight 如果相等,用其一等于iframe.height 即可
        // var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        // var height = Math.max(bHeight, dHeight);
        console.log(dHeight)
        iframe.height = dHeight;
    } catch (ex) { }
}



方案2、

html代码

<iframe id="iframe_id" name="iframe_id" src="加载的url" style="width: 100%;" frameborder="0" scrolling="no" onload="setHeight()"></iframe>


js代码

<script type="text/javascript">
	function setHeight(){
		var iframe = document.getElementById("iframe_id");
		try{
			var aHeight = iframe.contentWindow.document.body.scrollHeight;
			var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;
	       var height = Math.max(aHeight, bHeight);//取最高值;
	       iframe.height =  height;
	   }catch (e){}
	}
</script>



总结:亲测可用

本文标签: #自适应 #高度 #嵌入式 #iframe
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

swiper高度自适应

    最近在写项目中用到swiper做tab切换,因每个tab页的内容不一样,有的内容多,就会高一些,而有的内容少,会出现白屏,所以需要自适应高度,根绝官方API在swiper中添加 autoHeight: true ,但是并没有什么作用,第一

网络转载 CSS教程2023-03-28

CSS中常见的自适应布局是什么

小黑 CSS教程2022-10-30

iframe自适应屏幕高度

    这个需求一般用于移动端htmliframeid=idididsrc=https://hao.360.cn/iframeJS部分scripttype=text/javascriptfunctionautoHeight(){if(window.innerHeight){//FFnowHeight=window.innerHeight;}else{nowHeight=docum

小黑 web前端开发2021-08-12

CSS布局自适应模块等分比例

    CSS等比例划分,在CSS布局中是比较重要的,运行以下代码,查看事例。除了事例中的几个方法,还有个兼容性较好的方法,就是使用百分比,但是增减内容的时候,容易错乱。!DOCTYPE htmlhtmlheadmeta charset="utf-8"link media="all" href="http://www.tonjay.com/wp-content/themes/tonjayV2/style.css" rel="stylesheet

小黑 网页特效2018-09-02

下一篇
我来说两句
抢沙发