Rumah > hujung hadapan web > html tutorial > iframe自适应内容高度,动态变高变低_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:27:34
asal
1371 orang telah melayarinya

开发系统经常用到左边菜单,右边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
Salin selepas log masuk

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan