龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

使用JS解决iframe自适应宽度和高度问题

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
iframe自适应各种浏览器之间的高度与宽度,一直都是网页设计者头痛的问题,下面使用JS使得iframe自适应IE与FF浏览器的高度与宽度。 先来看下JS代码: JS Code [http://www.xueit.com] // iframe高

iframe自适应各种浏览器之间的高度与宽度,一直都是网页设计者头痛的问题,下面使用JS使得iframe自适应IE与FF浏览器的高度与宽度。

先来看下JS代码:

JS Code [http://www.xueit.com]
//iframe高度自适应 function IFrameReSize(iframename) { var pTar = document.getElementById(iframename); if (pTar) { //ff if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) { pTar.height = pTar.contentDocument.body.offsetHeight; } //ie else if (pTar.Document && pTar.Document.body.scrollHeight) { pTar.height = pTar.Document.body.scrollHeight; } } } //iframe宽度自适应 function IFrameReSizeWidth(iframename) { var pTar = document.getElementById(iframename); if (pTar) { //ff if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) { pTar.width = pTar.contentDocument.body.offsetWidth; } //ie else if (pTar.Document && pTar.Document.body.scrollWidth) { pTar.width = pTar.Document.body.scrollWidth; } } }

再来看下使用方法:

Code [http://www.xueit.com]
<iframe src="Main.aspx" scrolling="no" frameborder="0" height="100%" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe>

简单吧。

精彩图集

赞助商链接