快捷導(dǎo)航

JavaScript獲取網(wǎng)頁的寬高及如何兼容詳解

更新時(shí)間：2021年05月14日 09:50:33 作者：楓葉在夏天

這篇文章主要給大家介紹了關(guān)于JavaScript獲取網(wǎng)頁的寬高及如何兼容的相關(guān)資料，主要介紹了三個(gè)方式，分別是window.innerWidth / window.innerHeight、document.documentElement.clientWidth以及混雜模式/怪異模式下的寬高的獲取，需要的朋友可以參考下

很多場景下會需要獲取當(dāng)前網(wǎng)頁的寬高來達(dá)到一些效果，但是獲取網(wǎng)頁的寬高這里面還是有一點(diǎn)（hen duo）坑的，這里我進(jìn)行了總結(jié)和詳解，若有補(bǔ)充歡迎評論補(bǔ)充~

方式一：window.innerWidth / window.innerHeight

這種方式只支持IE9以及以上版本的瀏覽器

網(wǎng)頁高度，打開F12控制臺當(dāng)然高度會不同

方式二：document.documentElement.clientWidth

console.log(document.documentElement);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

document.documentElement獲取到的是HTML，從而獲取到了整個(gè)網(wǎng)頁

可用于IE9以下，當(dāng)然也支持IE9以及以上可以用來兼容

方式三：混雜模式/怪異模式下的寬高的獲取

怪異模式：沒有寫文檔聲明（就是第一行的那個(gè)< !DOCTYPE html >）就是怪異模式，這種模式下會有一些不同的渲染方式，感興趣的小伙伴可以去了解（這里講解的獲取寬高就是怪異模式特點(diǎn)之一）。

console.log(document.compatMode);
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);

這樣獲取的方式只有在混雜模式下可以正確獲取

在標(biāo)準(zhǔn)模式下不會報(bào)錯(cuò)，但是獲取到的寬高不是正確的

document.compatMode可以知道當(dāng)前文檔是混雜還是標(biāo)準(zhǔn)（BackCompat混雜，CSS1Compat標(biāo)準(zhǔn)）

你以為結(jié)束了？

問題才出現(xiàn)！~

所以，問題來了：怎么兼容？（別認(rèn)為兼容不重要，不兼容就有很大的報(bào)錯(cuò)風(fēng)險(xiǎn)啊喂！畢竟你不知道用戶會不會用IE6打開網(wǎng)頁@_@）

封裝：兼容了高低版本瀏覽器，標(biāo)準(zhǔn)/混雜模式

function getWid_Hei(){
    let width,height;
    if(window.innerWidth){
        width = window.innerWidth;
        height = window.innerHeight;
    }else if(document.compatMode === "BackCompat"){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }else{
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    return {
        width:width,
        height:height
    }
}
let {width,height} = getWid_Hei();
console.log(width,height);