瀏覽器的窗口位置和大小

前言

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

窗口的位置

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

  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四個屬性。
ui

  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及如下瀏覽器,必當對業務方感恩戴德。spa

相關文章
相關標籤/搜索