首页 >web前端 >html教程 >iframe自适应内容高度,动态变高变低_html/css_WEB-ITnose

iframe自适应内容高度,动态变高变低_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:27:341326浏览

开发系统经常用到左边菜单,右边iframe,的框架结构,如果iframe不随着子页面内容的高度随时变化就会出现双滚动条,非常难看。看了别人的方法有些是可以,但是随着iframe的src 变化,有时高度不能变小,只能变大。于是自己写了一个,写得着急,目前只试了firefox 和ie8 ,如果大家发现问题,我们一起讨论。```var browserVersion = window.navigator.userAgent.toUpperCase();var isOpera = false;var isFireFox = false;var isChrome = false;var isSafari = false;var isIE = false;var iframeTime;isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;if (!!window.ActiveXObject || "ActiveXObject" in window)	isIE = true;function reinitIframe(){ 	var iframe = document.getElementById("mainFrame"); 	try{ 		var height ;		if(isIE)			height = iframe.contentWindow.document.body.scrollHeight+4; 		if(isFireFox)			height = iframe.contentWindow.document.documentElement.scrollHeight; 		iframe.height = height; 	}catch (ex){} } window.setInterval("reinitIframe()", 200); ``````<iframe src="iframe-inner200.html" frameborder="0"  id="mainFrame" height='100' style="padding: 0px; width: 50%;" > ```相关参考http://www.cnblogs.com/slyzly/articles/2422737.html#commentformhttp://wenku.baidu.com/link?url=6qjzmHXcS-_Eo7n21vScW7_bgrJBya6HSHZknXCADENEUKl83AAw8L0caHzj-UIBjsn-BG33wwkuJ8Gl9S_E191Gcd8ibSTn6wFprGDbcri

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn