动态调整iframe页面的大小
2011-04-07 10:49
183 查看
今天遇到了一个问题,在父页面内有一个iframe能自动根据载入页面的大小而动态调整页面大小。特此记录下解决方法:
父页面main.html内js代码:
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:
Html代码
<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" onload="iframeOnload()" ></iframe>
</div>
载入页面sub.html内动态调整js代码:
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,具体请参见上述两处浏览器类型判断代码即可。
父页面main.html内js代码:
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*/
}
/*动态调整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:
Html代码
<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" onload="iframeOnload()" ></iframe>
</div>
<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" onload="iframeOnload()" ></iframe> </div>
载入页面sub.html内动态调整js代码:
Js代码
var height=($.browser.msie||$.browser.opera)? document.body.scrollHeight:document.body.offsetHeight;/*判断浏览器类型*/
parent.changeIframeSize(height);/*调用父页面内的js函数,调整iframe的大小*/
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,具体请参见上述两处浏览器类型判断代码即可。
相关文章推荐
- 动态调整iframe页面的大小
- jsp页面跳转到子页面和返回上一页,附带动态改变父页面的iframe高度大小
- 在iframe的name不定时,根据被包含页面大小动态改变iframe的大小(by quqi99)
- iframe根据子页面自动调整大小
- iframe根据子页面自动调整大小
- iframe如何让父页面根据子页面的大小而动态为子页面留出空间
- 加载页面时,根据页面的Iframe内的子页面的大小进行动态改变Iframe的大小 JS
- 多个iframe同时加载并动态调整大小
- [JS]iframe根据子页面自动调整大小
- 根据webform页面大小的变化动态调整控件的大小
- iframe里面 怎么让页面的大小自动调整到框架的大小
- 根据iframe中的一个对象大小去动态改变多个iframe的大小
- 动态改变对话框可调整大小属性
- art.dialog弹出框后再根据其内部iframe的大小调整大小
- 动态调整打印机纸张大小
- ios7:实现类似于人人、safari的可动态调整大小的导航条以及类似于雅虎天气的全透明导航条
- iframe 自动适应页面大小
- 页面动态加载Iframe文件
- iframe自动调整大小
- 关于iframe自适应高度,解决一个iframe动态改变url,改变页面同时解决高度自适应问题