快捷導(dǎo)航

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

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

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

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

網(wǎng)頁(yè)可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁(yè)可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁(yè)可見區(qū)域?qū)挘?document.body.offsetWidth + " (包括邊線和滾動(dòng)條的寬)";
網(wǎng)頁(yè)可見區(qū)域高：document.body.offsetHeight + " (包括邊線的寬)";
網(wǎng)頁(yè)正文全文寬：document.body.scrollWidth;
網(wǎng)頁(yè)正文全文高：document.body.scrollHeight;
網(wǎng)頁(yè)被卷去的高(ff)： document.body.scrollTop;
網(wǎng)頁(yè)被卷去的高(ie)：document.documentElement.scrollTop;
網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft;
網(wǎng)頁(yè)正文部分上： window.screenTop;
網(wǎng)頁(yè)正文部分左： 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ò)，看到這么多的相似的概念時(shí)我已經(jīng)瘋掉了，但處于技術(shù)人的執(zhí)著，我還是頑強(qiáng)的看完了并做了一些理解。經(jīng)過自己的理解和吸收之后，我覺得如果我每次想獲取一個(gè)高度或者寬度信息時(shí)我會(huì)抓狂的，因此，我對(duì)瀏覽器的這些屬性做了一些整理和抽象，按照這樣的三個(gè)對(duì)象來剝離這么多的相似的屬性，第一個(gè)是頁(yè)面，第二是窗口，第三個(gè)是視口。來看圖片理解我的這三個(gè)對(duì)象的含義吧：

對(duì)這三個(gè)概念做一個(gè)解釋：

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

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

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

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

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

 
var Browser = { 
}; 
//頁(yè)面 
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(); 
} 
} 
})(); 

做幾點(diǎn)說明：
1、已經(jīng)能支持獲取多瀏覽器的內(nèi)部的視口的寬度和高度信息
2、在IE 9中已經(jīng)和其他的瀏覽器(Opera、Chrome、FirFox、Safari)一樣，已經(jīng)能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth這四個(gè)屬性獲取瀏覽器的窗口、視口的寬度高度信息,但是IE9以前的IE版本是沒有這些屬性的，因此在這樣的情況下，我將視口和窗口的概念等同起來了。
2、雖然window有寬度和高度信息，但是不一定是真正瀏覽器窗口的真正的寬度和高度信息。因?yàn)橛行g覽器返回的結(jié)果中就不含菜單欄、工具欄等的高度信息。
實(shí)例演示：
在一個(gè)垂直內(nèi)容過多的頁(yè)面中，使一個(gè)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"; 
} 

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

您可能感興趣的文章: