Irame 自适应高度

最新推荐文章于 2020-04-19 13:25:49 发布

xcc258

最新推荐文章于 2020-04-19 13:25:49 发布

阅读量157

点赞数

分类专栏： Web页面 JavaScript 文章标签： js ViewUI

本文链接：https://blog.csdn.net/xcc258/article/details/84018368

版权

Web页面同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

第一种：在子页面添加JS，等页面加载完成执行

window.parent.document.getElementById("mainFrame").style.height=(document.body.scrollHeight+20) +"px";

第二种：在父页面执行

<iframe  src="<c:url value='/Controller?sl.service=VillBlogService.vill_index&userid=${userMap["userid"] }' />" name="mainFrame" 
      		id="mainFrame"  width="100%" scrolling="no" frameborder="0"  onload="javascript:dyniframesize('mainFrame');" ></iframe>
 <script language="javascript" type="text/javascript"> 
		function dyniframesize(down) { 
			var pTar = null; 
			if (document.getElementById){ 
				pTar = document.getElementById(down); 
			}else{ 
				eval('pTar = ' + down + ';'); 
			} 
			if (pTar && !window.opera){ 
				//begin resizing iframe 
				pTar.style.display="block" 
				if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
					//ns6 syntax 
					pTar.height = pTar.contentDocument.body.offsetHeight +20; 
					//pTar.width = pTar.contentDocument.body.scrollWidth+20; 
				} 
				else if (pTar.Document && pTar.Document.body.scrollHeight){ 
					//ie5+ syntax 
					pTar.height = pTar.Document.body.scrollHeight; 
					//pTar.width = pTar.Document.body.scrollWidth; 
				} 
			} 
		} 
	</script>

如果iframe里面经常改变dom对象，可加上window.setInterval("dyniframesize('mainFrame')", 200); 循环调用该方法，实时改变高度。

第三种：非常单一的iframe，在iframe里不做dom操作

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>