JavaScript 中的 Window 对象详解

一、Window 对象概述

1. 定义与作用

Window 对象是浏览器中 JavaScript 的全局对象，代表浏览器窗口。它是 JavaScript 环境的顶层对象，所有全局变量和函数都是它的属性和方法。在浏览器中，Window 对象同时也是 Document 对象的宿主，提供了操作浏览器窗口的各种功能。

2. 核心特性

• 全局作用域：在浏览器中，所有全局变量和函数都是 Window 对象的属性和方法。
• 浏览器控制：提供了控制浏览器窗口的方法，如打开新窗口、调整窗口大小等。
• 定时器管理：提供了 setTimeout 和 setInterval 等定时器方法。
• 弹窗与对话框：提供了 alert、confirm 和 prompt 等交互方法。
• 存储机制：通过 localStorage 和 sessionStorage 提供数据存储功能。
• 事件处理：处理窗口相关事件，如加载、调整大小和滚动等。

3. 访问方式

// 直接使用全局变量
console.log(window);

// 省略 window 前缀
console.log(document); // 等价于 window.document
console.log(setTimeout); // 等价于 window.setTimeout

二、Window 对象的基本属性

1. 窗口信息

console.log(window.innerWidth);  // 窗口内部宽度（像素）
console.log(window.innerHeight); // 窗口内部高度（像素）
console.log(window.outerWidth);  // 窗口外部宽度（包括边框）
console.log(window.outerHeight); // 窗口外部高度（包括边框）
console.log(window.scrollX);     // 水平滚动位置
console.log(window.scrollY);     // 垂直滚动位置

2. 历史与导航

console.log(window.location);    // 当前 URL 信息
console.log(window.history);     // 浏览器历史记录对象
console.log(window.history.length); // 历史记录条目数量

3. 浏览器与屏幕信息

console.log(window.navigator);   // 浏览器信息
console.log(window.screen);      // 屏幕信息
console.log(window.screen.width); // 屏幕宽度
console.log(window.screen.height); // 屏幕高度

4. 全局变量与函数

// 全局变量是 window 的属性
var globalVar = 42;
console.log(window.globalVar); // 42

// 全局函数是 window 的方法
function greet() {
   
  return "Hello!";
}
console.log(window.greet()); // "Hello!"

三、窗口控制与操作

1. 打开新窗口

// 打开新窗口
const newWindow = window.open('https://example.com', '_blank', 'width=500,height=400');

// 控制新窗口
if (newWindow) {
   
  newWindow.focus();
  // 可以通过 newWindow.document 访问新窗口的文档
}

2. 关闭窗口

// 关闭当前窗口（需要由脚本打开的窗口才能可靠关闭）
window.close();

// 检查窗口是否关闭
if (newWindow && !newWindow.closed) {
   
  newWindow.close();
}

3. 调整窗口大小和位置

// 调整窗口大小
window.resizeTo(800, 600);

// 移动窗口位置
window.moveTo(100, 100);

// 滚动窗口
window.scrollTo(0, 500);