动态调整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" οnclick="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" οnclick="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();
}
}