前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iframe自适应高度 原

iframe自适应高度 原

作者头像
tianyawhl
发布2019-04-04 16:33:22
2.2K0
发布2019-04-04 16:33:22
举报
文章被收录于专栏:前端之攻略

在网上找了2种方法,经测试都有效,最重要的是要发布后才能看到效果,代码如下:

代码语言:javascript
复制
 <div id ="div1"> 
		 <iframe src="zencoding test.html"  frameborder="0" scrolling="no"  width='100%' id="content_iframe"  ></iframe>
		 </div>
代码语言:javascript
复制
<script>
		
		 //自适应 iframe 内容高度
        function reinitIframe() {
            var iframe = document.getElementById("content_iframe");
    
            try {
                var userAgent = window.navigator.userAgent; //取得浏览器的userAgent字符串
                if (userAgent.indexOf("Chrome") > -1) {
                    var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;//documentElement 不能替换成body 否则 google浏览器不兼容
     
                } else {
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;//documentElement 不能替换成body 否则 google浏览器不兼容
                 

                }

                iframe.height = bHeight;
    
            } catch (ex) {

            }
        }
        window.setInterval("reinitIframe()", 200);
		</script>

下面的是点击加载不同的内容,并iframe自适应内容的高度

代码语言:javascript
复制
	<div class="demo">
		<div class="opt_btn">
			<button onclick="getData('iframeH');">加载内容1</button>
			<button onclick="getData('iframeH2');">加载内容2</button>
		</div>
		<iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)"></iframe>
	</div>

对应的js

代码语言:javascript
复制
<script type="text/javascript"> 
function getData(ifm){
	document.getElementById("ifrm").src = ifm+'.html';
	
}
function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}
</script> 

同时总结下经常用的高度           contentWindow   兼容各个浏览器,可取得子窗口的 window 对象。             contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。             document.body.clientWidth  可见区域内容的宽度(不包含边框,如果水平有滚动条,不显示全部内容的宽度)           document.body.clientHeight 全部内容的高度(如果垂直有滚动条,也显示全部内容的高度)           document.body.offsetWidth  可见区域内容的宽度(含边框,如果水平有滚动条,不显示全部内容的宽度)           document.body.offsetHeight 全部内容的高度(如果垂直有滚动条,也显示全部内容的高度)           document.body.scrollWidth  内容的宽度(含边框,如果有滚动则是包含整个页面的内容的宽度,即拖动滚动条后看到的所有内容)           document.body.scrollHeight 全部内容的高度

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/11/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档