多个iframe同时加载并动态调整大小

最新推荐文章于 2021-06-13 17:20:31 发布

原创最新推荐文章于 2021-06-13 17:20:31 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

工作项目同时被 2 个专栏收录

15 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态调整iframe的高度，并监控其加载状态变化，包括iframe的加载阶段，如loading、interactive和complete，确保页面布局的灵活性和响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态调整iframe高度的函数

function dyniframesize(ifm) {
		var pTar = null; 
		if (document.getElementById){ 
			pTar = document.getElementById(ifm); 
		}else{ 
			eval('pTar = ' + ifm + ';'); 
		}
		$(pTar).parent().css("visibility", "hidden");
		if (pTar && pTar.src && !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; 
			} 
			$(pTar).parent().css("visibility", "visible");
		}
	}

iframe初始化HTML页面放置要求

		<%--题目类容 --%>	
		<div class="challengeCantainter" style="margin-left:50px;">
			<s:iterator value="exerciseItemVoList" var="exerVo" status="status">
				<s:if test="isShowUserAnswer">
						<iframe id="challengeIframe${status.index}" name="challengeIframe${status.index}" index="${status.index}" style="display: none;"
							scrolling="no"  width="660px" frameborder="no" border="0" onclick="javascript:dyniframesize('challengeIframe${status.index}');"
							src ="<s:url value="/exercise/showExercise.action">
	            				<s:param name="itemId" value="#exerVo.id"/>
	            				<s:param name="exerciseStudyRecordItemId" value="#exerVo.exerciseStudyRecordItemId"/>
	        				</s:url>">
						</iframe>
				</s:if>
				<s:else>
						<iframe id="challengeIframe${status.index}" name="challengeIframe${status.index}" index="${status.index}" style="display: none;"
							scrolling="no"  width="660px" frameborder="no" border="0" onclick="javascript:dyniframesize('challengeIframe${status.index}');"
							src ="<s:url value="/exercise/showExercise.action">
	            				<s:param name="itemId" value="#exerVo.id"/>
	        				</s:url>">
						</iframe>
				</s:else>
			</s:iterator>
		</div>

触发调整

监控iframe加载的状态变化

每当iframe加载页面，过程内会激活onreadystatechange事件三次，
相应的状态分别是loading,interactive和complete，而最后一次才是complete. 

var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {
     if (this.readyState && this.readyState != 'complete') return;
     else {
         onComplete();
     }
}