動態調整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();} }

總結

以上是生活随笔為你收集整理的多个iframe同时加载并动态调整大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。