快捷導(dǎo)航

js獲取瀏覽器的可視區(qū)域尺寸的實(shí)現(xiàn)代碼

更新時(shí)間：2011年11月30日 23:58:40 作者：

js獲取瀏覽器的可視區(qū)域尺寸的實(shí)現(xiàn)代碼，需要的朋友可以參考下。

測試?yán)樱?

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
body{ border: 10px solid red;} 
#inner{width: 2000px; height: 2000px; border: 5px solid blue;} 
</style> 
</head> 
<body> 
<div id="inner"></div> 
</body> 
</html> 

結(jié)果：

chrome：

FF

OPERA:

SAFARI:

IE9:

IE8

IE7:

IE6

說明：

Chrome/FF/Safari/opera
對(duì)這些瀏覽器而言，window有個(gè)屬性innerWidth/innerHeight包含的是整個(gè)文檔的可視區(qū)域尺寸，注意，這個(gè)尺寸是包含滾動(dòng)條大小的。
如果我們不計(jì)滾動(dòng)條的影響，就可以直接使用這兩個(gè)屬性。
如果滾動(dòng)條會(huì)影響（比如最大化彈出框），那么應(yīng)該想另外的辦法。

Document對(duì)象是每個(gè)DOM樹的根，但是它并不代表樹中的一個(gè)HTML元素，document.documentElement屬性引用了作為文檔根元素的html標(biāo)記，document.body屬性引用了body標(biāo)記
我們這里獲取常見的三個(gè)值（scrollWidth、offsetWidth和clientwidth）來比較一下

document.documentElement.scrollWidth返回整個(gè)文檔的寬度
document.documentElement.offsetWidth返回整個(gè)文檔的可見寬度
document.documentElement.clientwidth返回整個(gè)文檔的可見寬度（不包含邊框），clientwidth = offsetWidth - borderWidth
不過一般來說，我們不會(huì)給document.documentElement來設(shè)置邊框，所以這里的clientwidth 與 offsetWidth一致

document.body.scrollWidth返回body的寬度
注意，這里的scrollWidth有個(gè)不一致的地方，基于webkit的瀏覽器（chrome和safari）返回的是整個(gè)文檔的寬度，也就是和document.documentElement.scrollWidth一致，
opera和FF返回的就是標(biāo)準(zhǔn)的body 的scrollWidth，個(gè)人覺得opera和FF算是比較合理的。
document.body.offsetWidth返回body的offsetWidth
document.body.clientwidth返回body的clientwidth（不包含邊框），clientwidth = offsetWidth - borderWidth

我們看上面的例子，會(huì)發(fā)現(xiàn)body和documentElement的有些值是相等的，這并不是表示他們是等同的。而是因?yàn)楫?dāng)我們沒有給body設(shè)置寬度的時(shí)候，document.body默認(rèn)占滿整個(gè)窗口寬度，于是就有：
document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientwidth = document.documentElement.clientwidth - document.body.borderWidth（body的邊框?qū)挾龋?BR>當(dāng)我們給body設(shè)置了一個(gè)寬度的時(shí)候，區(qū)別就出來了。

IE9/IE8
這兩個(gè)差不多，唯一的區(qū)別是IE9包含window.innerWidth屬性，而IE8不包含window.innerWidth屬性。
document.documentElement.scrollWidth返回整個(gè)文檔的寬度，和FF等瀏覽器一致
document.documentElement.offsetWidth返回整個(gè)文檔的可見寬度（包含滾動(dòng)條，值和innerWidth一致），注意，這里和FF等瀏覽器又有點(diǎn)區(qū)別。
document.documentElement.clientwidth返回整個(gè)文檔的可見寬度（不包含邊框），和FF等瀏覽器一致。clientwidth = offsetWidth - 滾動(dòng)條寬度

document.body.scrollWidth返回body的寬度，注意，這里的scrollWidth和FF等瀏覽器有點(diǎn)區(qū)別，這里并不包括body本身的border寬度。
因此例子中，相比FF少了10px。
document.body.offsetWidth返回body的offsetWidth，和FF等瀏覽器一致
document.body.clientwidth返回body的clientwidth（不包含邊框），和FF等瀏覽器一致，clientwidth = offsetWidth - borderWidth

IE7
IE7與IE9/IE8的主要區(qū)別是
第一、document.documentElement.offsetWidth的返回值不一樣，
參見上面說的，IE9/IE8的document.documentElement.offsetWidth包含滾動(dòng)條，但是，IE7的document.documentElement.offsetWidth不包含滾動(dòng)條。
第二、document.documentElement.scrollWidth返回整個(gè)文檔的寬度，注意，這里和IE9/IE8、FF等瀏覽器又有不一致，對(duì)于IE9/IE8、FF等瀏覽器，scrollWidth最小不會(huì)小于窗口的寬度，但是在IE下沒有這個(gè)限制，文檔有多小，這個(gè)就有多小
其他倒是挺一致的。

最后是IE6了
IE6的document.documentElement返回值與IE9/IE8沒有區(qū)別（由此可見，對(duì)于document.documentElement，IE7就是個(gè)奇葩）。
話說回來，IE的document.body就是個(gè)奇葩，當(dāng)沒有給body設(shè)置寬度的時(shí)候，body是默認(rèn)占滿整個(gè)文檔的（注意，其他的瀏覽器都是占滿整個(gè)窗口），當(dāng)然，最小值是整個(gè)窗口的大小，就是說body指向了根元素。
因此，在算上IE6在解析width方面的bug，和其他的瀏覽器的區(qū)別就淋漓盡致了。
document.body.scrollWidth返回body的寬度，和IE9/IE8/IE7一致
document.body.offsetWidth返回body的offsetWidth，注意，由于body的不同，這里的offsetWidth = scrollWidth + borderWidth
document.body.clientwidth返回body的clientwidth（不包含邊框）clientwidth = offsetWidth - borderWidth
另外，有一點(diǎn)和IE7同樣，就是document.documentElement.scrollWidth沒有最小寬度限制。

總結(jié)一下，在標(biāo)準(zhǔn)模式下，我們獲取文檔可見區(qū)域的方法如下：

復(fù)制代碼代碼如下:

 
function getViewSizeWithoutScrollbar(){//不包含滾動(dòng)條 
return { 
width : document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 
} 
} 
function getViewSizeWithScrollbar(){//包含滾動(dòng)條 
if(window.innerWidth){ 
return { 
width : window.innerWidth, 
height: window.innerHeight 
} 
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
return { 
width : document.documentElement.offsetWidth, 
height: document.documentElement.offsetHeight 
} 
}else{ 
return { 
width : document.documentElement.clientWidth + getScrollWith(), 
height: document.documentElement.clientHeight + getScrollWith() 
} 
} 
} 