做爲JavaScript的一個虔誠的教徒,在空餘時間我又去回顧了一遍(不知道是第幾遍了)聖經(JavaScript 高級程序設計),過程挖出了一個知識點---BOM 窗口位置和大小,回顧了幾年的開發過程,其實並無用到太多,因此漸漸把它遺忘到角落,可是想到虔誠的教徒不能厚此薄彼,決定寫這篇文章來加深下對 BOM 窗口的印象。瀏覽器
談到窗口的位置,那就會出現萬惡的瀏覽器兼容問題,如下列舉一些主流瀏覽器獲取窗口位置的屬性。
bash
到此可能我會很自信的給出獲取瀏覽器位置的方法,以下
框架
const leftPosition = typeOf window.screenLeft === 'number' ? window.screenLeft : window.screenX
const topPosition = typeOf window.screenTop === 'number' ? window.screenTop : window.screenY
複製代碼
可是
工具
相同的,瀏覽器窗口大小也提供了innerWidth, innerHeight, outerWidth, outerHeigt四個屬性。
ui
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