iframe高度自适应

最新推荐文章于 2022-08-23 20:11:06 发布

lijianbo_java

最新推荐文章于 2022-08-23 20:11:06 发布

阅读量217

点赞数

分类专栏： Js/Css

本文链接：https://blog.csdn.net/LiJianbo_Jon/article/details/79539255

版权

Js/Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个本人测试移动端能较好的自适应，PC端未测试。

<!DOCTYPE html>  
<html>  
<head>  
    <title>iframe宽度高度自适应</title>  
</head>  
<body id="body" height="100%">  
<script type="text/javascript">  
    //设置body高度为浏览器高度，当然也可以不设置     
    document.getElementsByTagName('body')[0].style.height = window.innerHeight+'px';  
</script>  
    <!--iframe的高度设置为父元素的高度即可实现高度自适应-->  
    <!--这边以body为父元素，当然也可以以div之类的元素为父元素-->  
    <iframe name="Info1" id="Info1" src="http://www.baidu.com" οnlοad="this.height=body.offsetHeight" width="100%" scrolling="true" frameborder="0"></iframe>  
</body>  
</html>

PC端自适应，我用的下面这个：

//为了自动展开页面，自适应滚动
	var browserVersion = window.navigator.userAgent.toUpperCase();
	var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
	var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
	var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
	var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
	var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
	var isIE9More = (! -[1, ] == false);
	function reinitIframe(iframeId, minHeight) {
	    try {
	        var iframe = document.getElementById(iframeId);
	        var bHeight = 0;
	        if (isChrome == false && isSafari == false)
	            bHeight = iframe.contentWindow.document.body.scrollHeight;
	
	        var dHeight = 0;
	        if (isFireFox == true)
	            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
	        else if (isIE == false && isOpera == false)
	            dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
	        else if (isIE == true && isIE9More) {//ie9+
	            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
	            if (heightDeviation == 0) {
	                bHeight += 3;
	            } else if (heightDeviation != 3) {
	                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
	                bHeight += 3;
	            }
	        }
	        else//ie[6-8]、OPERA
	            bHeight += 3;
	
	        var height = Math.max(bHeight, dHeight);
	        if (height < minHeight) height = minHeight;
	        iframe.style.height = height + "px";
	    } catch (ex) { }
	}
	function startInit(iframeId, minHeight) {
	    eval("window.IE9MoreRealHeight" + iframeId + "=0");
	    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
	}
	var workId = $("#view_flowpicture_workid").val();
	startInit('flowView'+workId, 100);

lijianbo_java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe高度自适应

这个本人测试移动端能较好的自适应，PC端未测试。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;iframe宽度高度自适应&lt;/title&gt; &lt;/head&gt; &lt;body id="body" height="100%"&gt;
复制链接

扫一扫