今天遇到了一个问题,在父页面内有一个iframe能自动根据载入页面的大小而动态调整页面大小。特此记录下解决方法:
父页面main.html内js代码:
/*动态调整iframe的大小*/ function changeIframeSize(iframeContentHeight){ document.getElementById('rightContent').height = iframeContentHeight+20; } /*iframe页面载入处理函数*/ function iframeOnload() { var frms=document.getElementById('rightContent'); /*判断浏览器类型*/ var height=($.browser.msie||$.browser.opera)? frms.document.body.scrollHeight:frms.contentDocument.body.offsetHeight; changeIframeSize(height); /*this.height=rightContent.document.body.scrollHeight*/ }
父页面main.html内的iframe:
<div id="right" >
<iframe width="100%" frameBorder="0" frameSpacing="0" scrolling="auto" marginHeight="0" marginWidth="0" name="rightContent" src="articlesList.jsp?categoryId=-1" id="rightContent" οnlοad="iframeOnload()" ></iframe>
</div>
载入页面sub.html内动态调整js代码:
var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;/*判断浏览器类型*/ parent.changeIframeSize(height);/*调用父页面内的js函数,调整iframe的大小*/
如上述代码所示,动态调整函数主要有两个:
1.iframeOnload主要用于当载入页面刚载入完成后,则响应iframe的onload事件;
2.changeIframeSize用于实际调整iframe的大小。iframe的onload的事件只有当该页面第一次载入时候才触发,而如果我们希望在页面载入以后,iframe仍然能根据载入页面的大小变化而动态调整,则是在载入页面中手动调用父页面内的changeIframeSize函数。
上述代码需要注意的地方如下:
1.$.browser.msie||$.browser.opera,用于判断浏览器的类型,这主要是不同浏览器对页面的实际尺寸理解不一致造成。我这里是利用jQuery来判断浏览器类型,因而还需要载入jQuery.js文件;
2.注意表示iframe内的载入页面在IE中无论是父页面还是载入页面都是调用document的;而在firefox中则不一样,在父亲中则是调用contentDocument,而在载入页面中则是用document,具体请参见上述两处浏览器类型判断代码即可。