快捷導(dǎo)航

用js小類庫獲取瀏覽器的高度和寬度信息

更新時間：2012年01月15日 22:26:09 作者：

在做項目時碰到了要在頁面上顯示一個浮動DIV層的效果。本來做的是在頁面居中時顯示的，但后來經(jīng)過自己的測試發(fā)現(xiàn)，當(dāng)網(wǎng)頁中出現(xiàn)了滾動條之后，那個浮動的DIV卻還是在頁面的頂部顯示的

因此當(dāng)用戶在一個較長內(nèi)容的網(wǎng)頁中點擊某一個按鈕顯示DIV層會發(fā)現(xiàn)沒有任何效果(其實已經(jīng)在頁面的頂部顯示了)，因此，我們需要準(zhǔn)備的知道用戶當(dāng)前的瀏覽的位置的信息。在實現(xiàn)這個要求之前，先來看看在js中有哪些工具可以讓我們使用：

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth + " (包括邊線和滾動條的寬)";
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight + " (包括邊線的寬)";
網(wǎng)頁正文全文寬：document.body.scrollWidth;
網(wǎng)頁正文全文高：document.body.scrollHeight;
網(wǎng)頁被卷去的高(ff)： document.body.scrollTop;
網(wǎng)頁被卷去的高(ie)：document.documentElement.scrollTop;
網(wǎng)頁被卷去的左：document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度： window.screen.availWidth;
你的屏幕設(shè)置是 window.screen.colorDepth +" 位彩色";
你的屏幕設(shè)置 window.screen.deviceXDPI +" 像素/英寸";

這段資料來源于網(wǎng)絡(luò)，看到這么多的相似的概念時我已經(jīng)瘋掉了，但處于技術(shù)人的執(zhí)著，我還是頑強的看完了并做了一些理解。經(jīng)過自己的理解和吸收之后，我覺得如果我每次想獲取一個高度或者寬度信息時我會抓狂的，因此，我對瀏覽器的這些屬性做了一些整理和抽象，按照這樣的三個對象來剝離這么多的相似的屬性，第一個是頁面，第二是窗口，第三個是視口。來看圖片理解我的這三個對象的含義吧：

對這三個概念做一個解釋：

頁面：就是我們制作出來的網(wǎng)頁的頁面的一個抽象，他的高度通常比我們的瀏覽器的高度要高，寬度通常是小于等于我們的瀏覽器寬度

瀏覽器窗口：就是我們使用的瀏覽器的一個抽象，他包含了菜單欄、工具欄、書簽欄、狀態(tài)欄、頁面顯示區(qū)等。因此他的高度絕對大于等于視口的高度，寬度絕對大于等于視口的寬度

視口：就是瀏覽器中顯示頁面的區(qū)域

有了這三個概念鋪底，我們來寫個小類庫，獲取這個“對象”的高度和寬度等信息吧：

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

 
var Browser = { 
}; 
//頁面 
Browser.Page = (function () { 
return { 
scrollTop: function () { 
return Math.max(document.body.scrollTop, document.documentElement.scrollTop); 
}, 
scrollLeft: function () { 
return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft); 
}, 
height: function () { 
var _height; 
if (document.compatMode == "CSS1Compat") { 
_height = document.documentElement.scrollHeight; 
} else { 
_height = document.body.scrollHeight; 
} 
return _height; 
}, 
width: function () { 
var _width; 
if (document.compatMode == "CSS1Compat") { 
_width = document.documentElement.scrollWidth; 
} else { 
_width = document.body.scrollWidth; 
} 
return _width; 
} 
}; 
})(); 
//窗口： 
Browser.Window = (function () { 
return { 
outerHeight: function () { 
var _hei = window.outerHeight; 
if (typeof _hei != "number") { 
_hei = Browser.ViewPort.outerHeight(); 
} 
return _hei; 
}, 
outerWidth: function () { 
var _wid = window.outerWidth; 
if (typeof _wid != "number") { 
_wid = Browser.ViewPort.outerWidth(); 
} 
return _wid; 
}, 
innerHeight: function () { 
var _hei = window.innerHeight; 
if (typeof _hel != "number") { 
_hei = Browser.ViewPort.innerHeight(); 
} 
return _hei; 
}, 
innerWidth: function () { 
var _wid = window.innerWidth; 
if (typeof _wid != "number") { 
_wid = Browser.ViewPort.innerWidth(); 
} 
return _wid; 
}, 
height: function () { 
return Browser.Window.innerHeight(); 
}, 
width: function () { 
return Browser.Window.innerWidth(); 
} 
} 
})(); 
//視口: 
Browser.ViewPort = (function () { 
return { 
innerHeight: function () { 
var _height; 
if (document.compatMode == "CSS1Compat") { 
_height = document.documentElement.clientHeight; 
} else { 
_height = document.body.clientHeight; 
} 
return _height; 
}, 
innerWidth: function () { 
var _width; 
if (document.compatMode == "CSS1Compat") { 
_width = document.documentElement.clientWidth; 
} else { 
_width = document.body.clientWidth; 
} 
return _width; 
}, 
outerHeight: function () { 
var _height; 
if (document.compatMode == "CSS1Compat") { 
_height = document.documentElement.offsetHeight; 
} else { 
_height = document.body.offsetHeight; 
} 
return _height; 
}, 
outerWidth: function () { 
var _width; 
if (document.compatMode == "CSS1Compat") { 
_width = document.documentElement.offsetWidth; 
} else { 
_width = document.body.offsetWidth; 
} 
return _width; 
}, 
width: function () { 
return Browser.ViewPort.innerWidth(); 
}, 
height: function () { 
return Browser.ViewPort.innerHeight(); 
} 
} 
})(); 

做幾點說明：
1、已經(jīng)能支持獲取多瀏覽器的內(nèi)部的視口的寬度和高度信息
2、在IE 9中已經(jīng)和其他的瀏覽器(Opera、Chrome、FirFox、Safari)一樣，已經(jīng)能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth這四個屬性獲取瀏覽器的窗口、視口的寬度高度信息,但是IE9以前的IE版本是沒有這些屬性的，因此在這樣的情況下，我將視口和窗口的概念等同起來了。
2、雖然window有寬度和高度信息，但是不一定是真正瀏覽器窗口的真正的寬度和高度信息。因為有些瀏覽器返回的結(jié)果中就不含菜單欄、工具欄等的高度信息。
實例演示：
在一個垂直內(nèi)容過多的頁面中，使一個DIV總能保持在視口的中心位置(非精確中心位置)：
代碼：

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

 
window.onload = window.onresize = function () { 
var top = Math.round(Browser.Page.scrollTop() + (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2)); 
var left = Math.round(Browser.Page.scrollLeft() + (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2)); 
document.getElementById("divCenter").style.top = top + "px"; 
document.getElementById("divCenter").style.left = left + "px"; 
} 

大家測試時可以采用改變窗口大小的方式來查看。
時間不早了，晚安！
源代碼下載查看

您可能感興趣的文章: