JavaScript BOM Window对象与窗口尺寸获取详解

BOM与Window对象概述

浏览器对象模型（BOM）赋予了JavaScript与浏览器进行交互的能力。

浏览器对象模型（BOM）

目前，BOM尚未形成正式的标准规范。

鉴于现代浏览器在JavaScript交互功能上已实现高度一致的方法和属性，这些通常被视为BOM的核心组成部分。

Window 对象

所有主流浏览器均支持window对象，该对象代表了当前的浏览器窗口。

在JavaScript中，所有全局对象、函数以及变量都会自动成为window对象的成员。

具体而言，全局变量表现为window对象的属性。

同样地，全局函数则表现为window对象的方法。

甚至HTML DOM中的document对象也是window对象的一个属性，例如：

window.document.getElementById("header");

上述写法与以下写法完全等效：

document.getElementById("header");

获取浏览器窗口尺寸

Window 尺寸

确定浏览器窗口尺寸主要有三种方式。

针对Internet Explorer、Chrome、Firefox、Opera以及Safari等现代浏览器：

window.innerHeight - 获取浏览器窗口的内部高度（包含滚动条） window.innerWidth - 获取浏览器窗口的内部宽度（包含滚动条）

针对Internet Explorer 8、7、6、5等旧版本浏览器：

document.documentElement.clientHeight document.documentElement.clientWidth

或者采用以下替代方案：

document.body.clientHeight document.body.clientWidth

以下是一个实用的JavaScript解决方案，能够兼容所有主流浏览器：

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该示例用于显示浏览器窗口的高度和宽度。

Window对象的其他方法

其他 Window 方法

此外，Window对象还提供了一些其他常用方法：

• window.open() - 用于打开新窗口
• window.close() - 用于关闭当前窗口
• window.moveTo() - 用于移动当前窗口的位置
• window.resizeTo() - 用于调整当前窗口的尺寸

以上内容涵盖了JavaScript BOM中Window对象的核心知识点，希望能为读者提供有益的帮助。