js擷取瀏覽器的可視地區尺寸的實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

測試例子：複製代碼代碼如下:<!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>

結果：

chrome：

OPERA:

SAFARI:

IE9:

IE8

IE7:

IE6

說明：

Chrome/FF/Safari/opera
對這些瀏覽器而言，window有個屬性innerWidth/innerHeight包含的是整個文檔的可視地區尺寸，注意，這個尺寸是包含捲軸大小的。
如果我們不計捲軸的影響，就可以直接使用這兩個屬性。
如果捲軸會影響（比如最大化彈出框），那麼應該想另外的辦法。

Document對象是每個DOM樹的根，但是它並不代表樹中的一個HTML元素，document.documentElement屬性引用了作為文檔根項目的html標記，document.body屬性引用了body標記
我們這裡擷取常見的三個值（scrollWidth、offsetWidth和clientwidth）來比較一下

document.documentElement.scrollWidth返回整個文檔的寬度
document.documentElement.offsetWidth返回整個文檔的可見寬度
document.documentElement.clientwidth返回整個文檔的可見寬度（不包含邊框），clientwidth = offsetWidth - borderWidth
不過一般來說，我們不會給document.documentElement來設定邊框，所以這裡的clientwidth 與 offsetWidth一致

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

我們看上面的例子，會發現body和documentElement的有些值是相等的，這並不是表示他們是等同的。而是因為當我們沒有給body設定寬度的時候，document.body預設佔滿整個視窗寬度，於是就有：
document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientwidth = document.documentElement.clientwidth - document.body.borderWidth（body的邊框寬度）
當我們給body設定了一個寬度的時候，區別就出來了。

IE9/IE8
這兩個差不多，唯一的區別是IE9包含window.innerWidth屬性，而IE8不包含window.innerWidth屬性。
document.documentElement.scrollWidth返回整個文檔的寬度，和FF等瀏覽器一致
document.documentElement.offsetWidth返回整個文檔的可見寬度（包含捲軸，值和innerWidth一致），注意，這裡和FF等瀏覽器又有點區別。
document.documentElement.clientwidth返回整個文檔的可見寬度（不包含邊框），和FF等瀏覽器一致。clientwidth = offsetWidth - 捲軸寬度

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

IE7
IE7與IE9/IE8的主要區別是
第一、document.documentElement.offsetWidth的傳回值不一樣，
參見上面說的，IE9/IE8的document.documentElement.offsetWidth包含捲軸，但是，IE7的document.documentElement.offsetWidth不包含捲軸。
第二、document.documentElement.scrollWidth返回整個文檔的寬度，注意，這裡和IE9/IE8、FF等瀏覽器又有不一致，對於IE9/IE8、FF等瀏覽器，scrollWidth最小不會小於視窗的寬度，但是在IE下沒有這個限制，文檔有多小，這個就有多小
其他倒是挺一致的。

最後是IE6了
IE6的document.documentElement傳回值與IE9/IE8沒有區別（由此可見，對於document.documentElement，IE7就是個奇葩）。
話說回來，IE的document.body就是個奇葩，當沒有給body設定寬度的時候，body是預設佔滿整個文檔的（注意，其他的瀏覽器都是佔滿整個視窗），當然，最小值是整個視窗的大小，就是說body指向了根項目。
因此，在算上IE6在解析width方面的bug，和其他的瀏覽器的區別就淋漓盡致了。
document.body.scrollWidth返回body的寬度，和IE9/IE8/IE7一致
document.body.offsetWidth返回body的offsetWidth，注意，由於body的不同，這裡的offsetWidth = scrollWidth + borderWidth
document.body.clientwidth返回body的clientwidth（不包含邊框）clientwidth = offsetWidth - borderWidth
另外，有一點和IE7同樣，就是document.documentElement.scrollWidth沒有最小寬度限制。

總結一下，在標準模式下，我們擷取文檔可見地區的方法如下：

複製代碼代碼如下:function getViewSizeWithoutScrollbar(){//不包含捲軸
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//包含捲軸
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()
}
}
}

getScrollWith()是擷取捲軸尺寸，參見
http://www.jb51.net/article/29036.htm
有什麼錯誤歡迎指出

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More