JavaScript Window 对象

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 能够与浏览器进行交互，而独立于网页内容本身。

浏览器对象模型 (BOM)

虽然 BOM 在历史上不像 DOM 那样拥有单一的正式标准，但现在它的许多功能都在 WHATWG 的 HTML Living Standard 中得到了很好的定义，确保了核心功能的跨浏览器兼容性。

现代浏览器在 JavaScript 交互的通用方法和属性集上已基本趋同，这构成了我们所称的 BOM 的基础。

Window 对象

window 对象是 BOM 的核心，受到所有浏览器的支持。它代表了包含网页的浏览器窗口或标签页。

在浏览器环境中，window 对象是全局对象 (global object)。所有全局 JavaScript 变量、函数和对象都会自动成为 window 对象的属性 (properties) 和方法 (methods)。

例如，全局变量 myGlobalVar 也可以通过 window.myGlobalVar 来访问。

类似地，全局函数是 window 对象的方法。

document 对象是 HTML DOM 的入口点，它本身就是 window 对象的一个属性：

window.document.getElementById(“header”);

由于 window 是全局对象，直接访问其属性和方法时可以省略 window.：

document.getElementById(“header”);

窗口大小和屏幕信息

您可以使用标准属性来确定浏览器窗口的视口 (viewport) 大小（即显示网页的区域，不包括工具栏和滚动条）：

• window.innerWidth - 浏览器窗口视口的内部宽度。
• window.innerHeight - 浏览器窗口视口的内部高度。

这些属性在现代浏览器中普遍得到支持。

例如，获取视口的尺寸：

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`Viewport dimensions: ${viewportWidth}x${viewportHeight}`);

要获取关于用户整个屏幕（不仅仅是浏览器窗口）的信息，可以使用 window.screen 对象：

• screen.width - 用户屏幕的总宽度。
• screen.height - 用户屏幕的总高度。
• screen.availWidth - 可供应用程序使用的宽度（不包括操作系统功能，如任务栏）。
• screen.availHeight - 可供应用程序使用的可用高度。

其他有用的 Window 属性和方法

window 对象提供了许多其他有用的属性和方法，用于浏览器交互：

• window.location: 提供当前 URL 的信息并允许导航（例如，window.location.href，window.location.reload()）。
• window.navigator: 包含关于浏览器的信息（例如，用户代理字符串 (user agent string)，地理位置 (geolocation)）。
• window.history: 允许与浏览器会话历史记录进行交互（例如，history.back()，history.forward()）。
• window.console: 访问浏览器的调试控制台 (debugging console)（例如，console.log()）。
• window.alert(message): 显示一个带有消息的简单模态对话框 (modal dialog)。
• window.confirm(message): 显示一个带有消息和确定/取消按钮的模态对话框，返回 true 或 false。
• window.prompt(message, defaultValue): 显示一个提示用户输入的模态对话框。
• window.setTimeout(function, milliseconds): 在指定的延迟后执行一个函数。
• window.setInterval(function, milliseconds): 以指定的间隔重复执行一个函数。
• window.open(url, name, features): 打开新的浏览器窗口或标签页。其行为可能会受到浏览器弹窗拦截器 (pop-up blockers) 的影响。
• window.close(): 关闭当前窗口（通常仅对由脚本打开的窗口有效）。
• window.scrollX / window.scrollY: 返回文档水平和垂直滚动的像素数。
• window.scrollTo(x, y) 或 window.scrollTo(options): 将窗口滚动到文档中的特定坐标位置。

注意：尝试移动或调整浏览器窗口大小的方法（如 window.moveTo() 和 window.resizeTo()）出于安全和用户体验考虑，现代浏览器通常会对其进行限制，可能无法按预期工作甚至完全失效。