你真的懂js獲取可視區寬高嗎

景在峰中發表於2018-10-17
JS

可能你會覺得獲取可視區寬高不是很簡單嗎

原生js獲取高度不就是就window.innerHeight一句話的事，可是真的這麼簡單嗎

來看個測試頁面,如果頁面帶有橫向縱向的滾動條，我們列印出各個高度進行檢視對比

順便你也可以看看document.body和document.documentElement在各個瀏覽器的差異;document.documentElement返回的是整個文件的根節點即 html標籤；document.body 返回的是DOM物件裡的body子節點，即 body 標籤

console.log(`document.documentElement.clientHeight-` + document.documentElement.clientHeight);
console.log(`document.documentElement.scrollHeight-` + document.documentElement.scrollHeight);
console.log(`document.documentElement.offsetHeight-` + document.documentElement.offsetHeight);
console.log(`document.body.clientHeight-` + document.body.clientHeight);
console.log(`document.body.scrollHeight-` + document.body.scrollHeight);
console.log(`document.body.offsetHeight-` + document.body.offsetHeight);
console.log(`window.innerHeight-` + window.innerHeight);
複製程式碼
  1. ie8下各個值
image
  1. ie9下各個值
image
  1. ie10跟ie9一樣不列圖了
  2. ie11下各個值
image

6. 火狐瀏覽器下各個值

image
  1. chorme瀏覽器下各個值
image

通過以上各圖對比不難看出（先排除ie8）

window.innerHeight = document.documentElement.clientHeight + 滾動條高度；

如果沒有滾動條則window.innerHeight = document.documentElement.clientHeight

在來說說ie8

ie8比較特殊不支援window.innerHeight並且html還自帶有2畫素的邊框;
可以通過document.documentElement.offsetHeight – 2 * 2得到window.innerHeight的值

所以ie8的window.innerHeight = document.documentElement.offsetHeight – 2 * 2 = document.documentElement.clientHeight + 滾動條高度。

如果沒有滾動條window.innerHeight = document.documentElement.offsetHeight – 2 * 2 = document.documentElement.clientHeight

所以獲取可視區的高度不是簡單的window.innerHeight，真正的可視區高度不應該包括滾動條

/**
*  獲取視口寬高 相容相容到ie8
*  @param {boolean} flag 標識返回的寬高是否包含滾動條
*  @return {object} {widht: xxx, height: xxx} 視口寬高
/ 
function getViewPort (flag) {
    if (typeof flag === `undefined`) {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
    if (flag === true) {
        // ie8 html 有2畫素邊框 上下, 左右 4畫素
        return {
            width: window.innerWidth || document.documentElement.offsetWidth - 2 * 2,
            height: window.innerHeight || document.documentElement.offsetHeight - 2 * 2
        };
    }
}
複製程式碼

獲取文件的寬高呢

通過以上各圖的對比，整個文件的高度，可以通過document.documentElement.scrollHeight來獲取各個瀏覽器都比較一致，你也不必糾結到底是用document.body 還是用document.documentElement; 用clientHeight還是offsetHeight

/**
*  獲取文件寬高 相容相容到ie8
* 
*  @return {object} {widht: xxx, height: xxx} 視口寬高
/ 
function getDocumentPort (flag) {
    return {
        width: document.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight
    };
}

複製程式碼

相關文章