瀏覽器的窗口位置和大小

前言

做爲JavaScript的一個虔誠的教徒，在空餘時間我又去回顧了一遍（不知道是第幾遍了）聖經（JavaScript 高級程序設計），過程挖出了一個知識點---BOM 窗口位置和大小，回顧了幾年的開發過程，其實並無用到太多，因此漸漸把它遺忘到角落，可是想到虔誠的教徒不能厚此薄彼，決定寫這篇文章來加深下對 BOM 窗口的印象。

窗口的位置

談到窗口的位置，那就會出現萬惡的瀏覽器兼容問題，如下列舉一些主流瀏覽器獲取窗口位置的屬性。

1. screenLeft, screenTop
   支持的瀏覽器有 IE, Safari, Opera, Chrome
2. screenX, screenY
   支持的瀏覽器有 Firefox, Safari, Chrome, 此外，Opera也支持該屬性，但與screenLeft,screenTop不對應
   

到此可能我會很自信的給出獲取瀏覽器位置的方法，以下

const leftPosition = typeOf window.screenLeft === 'number' ? window.screenLeft : window.screenX
const topPosition = typeOf window.screenTop === 'number' ? window.screenTop : window.screenY
複製代碼

可是

瀏覽器表現的結果卻不盡然相同
假設window對象是最外層對象，在IE、Opera中，當瀏覽器上端緊貼屏幕（y軸座標爲0），screenTop的值爲瀏覽器工具欄高度，大概是下圖這個樣子

在Chrome、Firefox、Safari中，一樣的條件下，screenTop的值爲0

另外要注意的是，Firefox、Safari、Chrome始終返回每一個框架的top.screenX和top.screenY的值，不受頁面外邊距改變的影響。而IE、Opera則會給出框架相對於屏幕邊界的精確座標值

窗口的大小

相同的，瀏覽器窗口大小也提供了innerWidth, innerHeight, outerWidth, outerHeigt四個屬性。

1. 在IE9+（考慮IE8？不存在的）， Safari， Firefox中，outerWidth和outerHeight返回瀏覽器窗口自己尺寸。innerWidth，innerHeight表示頁面視口大小（減輕邊框寬度）。
   
2. 在Opera中，outerWidth和outerHeight這兩個屬性的值表示頁面視圖容器的大小。innerWidth，innerHeight表示頁面視口大小（減輕邊框寬度）。
   
3. 在Chrome中，outerWidth和outerHeight與innerWidth，innerHeight返回的值一致，表示視口的大小。
   
   最終會發現咱們沒法肯定瀏覽器窗口自己的大小，可是能夠缺德頁面視口的大小。document.documentElement對象中保存了clientWidth，clientHeight兩個屬性，從而來描述也是視口信息，因此能夠經過如下代碼來獲取視口大小

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight
if (typeOf innerWidth != 'number') {
    if (document.compatMode == 'CSS1Compat') {//嚴格模式
        pageWidth = document.documentElement.clientWidth
        pageHeight = document.documentElement.clientHeight
    } else {
        pageWidth = document.body.clientWidth
        pageHeight = document.body.clientHeight
    }
}
複製代碼

總結

總的來講，以上並非什麼難的知識點，在目前一個各大瀏覽器並存的狀況下，如何兼容纔是問題所在。本人做爲一個勤勤懇懇的切圖仔，只要不遇到IE8及如下瀏覽器，必當對業務方感恩戴德。