关于JavaScript中获取浏览器窗口大小的说明

在JavaScript交互时,我们常常需要获取当前浏览器窗口的大小,从而进行定位元素等操作。不过获取各个版本浏览器窗口大小的方法都略有差异,当然我们可以使用jQuery等兼容多种浏览器的JavaScript框架来获取,但是有时我们又不希望引入第三方的JavaScript库,所以我们只能通过使用原生的JavaScript方法来获取。
以下代码定义了如何通过原生的JavaScript方法来获取浏览器窗口的大小:

// 定义获取窗口大小的方法
(function (window, undefined) {
    // 定义获取窗口高度
    if (typeof (window.getWindowHeight) != "function") {
        window.getWindowHeight = function () {
            var height = false;
            if (window.innerHeight) {
                height = window.innerHeight;
            } else if (document.body && document.body.clientHeight) {
                height = document.body.clientHeight;
            }
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                height = document.documentElement.clientHeight;
            }
            return height;
        };
    }
    // 定义获取窗口宽度
    if (typeof (window.getWindowWidth) != "function") {
        window.getWindowWidth = function () {
            var width = false;
            if (window.innerWidth) {
                width = window.innerWidth;
            } else if (document.body && document.body.clientWidth) {
                width = document.body.clientWidth;
            }
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                width = document.documentElement.clientWidth;
            }
            return width;
        };
    }
})(window);

发表回复