iframe高度自适应解决方式

最新推荐文章于 2024-08-20 23:46:15 发布

lavendersue

最新推荐文章于 2024-08-20 23:46:15 发布

阅读量1.4k

点赞数

分类专栏： js&jq 文章标签： iframe 高度自适应

本文链接：https://blog.csdn.net/lavendersue/article/details/103250796

版权

本文介绍了如何解决iframe高度自适应的问题，提供了一种在各种浏览器（包括IE6到IE8，Firefox，Opera，Chrome和Safari）中兼容的方法，以避免iframe内容溢出导致的滚动条现象。内容包括如何在页面加载时自动设置iframe的高度，以及针对已知ID的iframe进行调整的技巧。

摘要由CSDN通过智能技术生成

带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家几种iframe动态调整高度的方法。
1、


<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>

<script>
	function SetWinHeight(obj) { 
		var win=obj; 
		if (document.getElementById) { 
			if (win && !window.opera) { 
				if (win.contentDocument && win.contentDocument.body.offsetHeight) {
					win.height = win.contentDocument.body.offsetHeight; 
				}else if(win.Document && win.Document.body.scrollHeight) {
					win.height = win.Document.body.scrollHeight; 
				}
			} 
		} 
	} 
	</script>

2、在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe> 
<script type="text/javascript" language="javascript"> 
	function iFrameHeight() { 
		var ifm= document.getElementById("iframepage"); 
		var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; 
		if(ifm != null && subWeb != null) { 
			ifm.height = sub