Heim > Web-Frontend > HTML-Tutorial > iframe自适应内容高度,动态变高变低_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:27:34
Original
1313 Leute haben es durchsucht

开发系统经常用到左边菜单,右边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
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage