瀏覽器的視窗位置和大小

若沉發表於2019-05-07
瀏覽器

前言

作為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及以下瀏覽器，必當對業務方感恩戴德。

相關文章