在 JavaScript 中，window 对象代表浏览器的窗口。它是一个全局对象，包含了多种方法和属性，我们可以利用它们来访问和操作当前浏览器窗口。例如，显示警告、打开新窗口、关闭当前窗口等等。
所有的 JavaScript 全局变量都是 window 对象的属性，所有的全局函数都是 window 对象的方法。此外，当浏览器渲染 'iframe' 内容时，它会为浏览器和每个 iframe 创建一个单独的 'window' 对象。
下面，您将学习如何将 window 对象作为一个全局对象来使用，并使用 window 对象的属性和方法。
window 对象作为全局对象
由于 window 在 Web 浏览器中是一个全局对象，因此您可以在代码中的任何地方使用 window 对象来访问全局变量、函数、对象等等。
让我们通过下面的例子来理解这一点。
示例
在下面的代码中，我们在函数内部定义了一个全局变量 num 和一个局部变量 num。同时，我们也定义了一个全局对象 car。
在 test() 函数中，我们使用 window 对象访问了全局 num 变量的值。
<html>
<body>
<div id="output1">全局 num 变量的值是: </div>
<div id="output2">局部 num 变量的值是: </div>
<div id="output3">car 对象的值是: </div>
<script>
var num = 100;
const car = {
brand: "Honda",
model: "city",
}
function test() {
let num = 300;
document.getElementById("output1").innerHTML += window.num;
document.getElementById("output2").innerHTML += num;
document.getElementById("output3").innerHTML += car.brand;
}
test();
</script>
</body>
</html>
输出：
全局 num 变量的值是: 100
局部 num 变量的值是: 300
car 对象的值是: Honda
您也可以使用 window 对象从特定块内使某个变量成为全局变量。
window 对象属性
window 对象包含多种属性，返回有关当前窗口的状态和信息。
下面，我们覆盖了 window 对象的所有属性及其描述。您可以使用 window 作为参考来访问这些属性。
| 属性名称 |
属性描述 |
| closed |
当特定窗口关闭时返回 true。 |
| console |
返回窗口的 console 对象。 |
| customElements |
用于定义和访问浏览器窗口中的自定义元素。 |
| devicePixelRatio |
返回设备的物理像素比除以 CSS 像素比。 |
| document |
用于访问当前窗口中打开的 HTML 文档。 |
| frames |
用于获取当前窗口中打开的如 iframe 的窗口项。 |
| frameElement |
返回当前窗口的框架。 |
| history |
用于获取窗口的历史记录对象。 |
| innerHeight |
返回窗口内部的高度（不包括滚动条、工具栏等）。 |
| innerWidth |
返回窗口内部的宽度（不包括滚动条、工具栏等）。 |
| length |
返回当前窗口中的 iframe 总数。 |
| localStorage |
用于访问当前窗口的本地存储。 |
| location |
用于访问当前窗口的位置对象。 |
| name |
用于获取或设置窗口的名称。 |
| navigator |
用于获取浏览器的 Navigator 对象。 |
| opener |
返回当前窗口是由哪个窗口打开的引用。 |
| outerHeight |
返回窗口的总高度。 |
| outerWidth |
返回窗口的总宽度。 |
| pageXOffset |
返回您水平滚动网页的像素数。 |
| pageYOffset |
返回您垂直滚动网页的像素数。 |
| parent |
包含当前窗口父窗口的引用。 |
| scheduler |
用于使用优先任务调度的入口点。 |
| screen |
返回当前窗口的 'screen' 对象。 |
| screenLeft |
返回当前窗口相对于屏幕的位置的 x 坐标（以像素为单位）。 |
| screenTop |
返回当前窗口相对于屏幕的位置的 y 坐标（以像素为单位）。 |
| screenX |
类似于 screenLeft 属性。 |
| screenY |
类似于 screenTop 属性。 |
| scrollX |
类似于 pageXOffset。 |
| scrollY |
类似于 pageYOffset。 |
| self |
用于获取窗口的当前状态。 |
| sessionStorage |
让您访问当前窗口的 'sessionStorage' 对象。 |
| speechSynthesis |
允许您使用 Web Speech API。 |
| visualViewPort |
返回包含当前窗口视口的对象。 |
| top |
包含指向最顶层窗口的引用。 |
下面，我们将覆盖一些属性并附带示例。
outerHeight / outerWidth 属性
window 对象的 outerHeight 属性返回窗口的高度，而 outerWidth 属性返回窗口的宽度。
示例
在下面的代码中，我们使用 outerHeight 和 outerWidth 属性来获取窗口的尺寸。您可以改变窗口的大小，并观察这些属性值的变化。
<html>
<body>
<p id="output1">窗口的外宽是: </p>
<p id="output2">窗口的外高是: </p>
<script>
const outerHeight = window.outerHeight;
const outerWidth = window.outerWidth;
document.getElementById("output1").innerHTML += outerWidth;
document.getElementById("output2").innerHTML += outerHeight;
</script>
</body>
</html>
输出：
窗口的外宽是: 1536
窗口的外高是: 816
screenLeft 属性
window 对象的 screenLeft 属性返回当前窗口的左侧位置。
示例
在下面代码的输出中，您可以查看当前窗口的左侧位置（以像素为单位）。
<html>
<body>
<div id="output">您的浏览器窗口左侧偏移量为: </div>
<script>
const screenLeft = window.screenLeft;
document.getElementById("output").innerHTML += screenLeft + " px.";
</script>
</body>
</html>
输出：
您的浏览器窗口左侧偏移量为: 0 px.
JavaScript 中的窗口对象方法
在 JavaScript 中，window 对象也包含了一些方法来操控当前的浏览器窗口。
下面的表格覆盖了 window 对象的方法以及它们的描述。您可以使用 window 作为参考来访问和调用以下方法，从而使得代码更易于阅读。
| 方法名称 |
方法描述 |
| alert() |
用于向访问者展示警告信息。 |
| atob() |
将字符串转换成 base-64 字符串。 |
| blur() |
移除窗口的焦点。 |
| btoa() |
将 base-64 字符串解码成普通字符串。 |
| cancelAnimationFrame() |
取消使用 requestAnimationFrame() 方法安排的动画帧。 |
| cancelIdleCallback() |
取消使用 requestIdCallback() 方法安排的回调。 |
| clearImmediate() |
清除使用 setImmediate() 方法指定的动作。 |
| clearInterval() |
重置使用 setInterval() 方法设置的定时器。 |
| clearTimeout() |
停止使用 setTimeout() 方法设置的超时。 |
| close() |
用于关闭当前窗口。 |
| confirm() |
显示确认框以获取用户的确认。 |
| focus() |
聚焦当前活动窗口。 |
| getComputedStyle() |
返回当前窗口计算后的 CSS 样式。 |
| getSelection() |
返回基于选定文本范围的选择对象。 |
| matchMedia() |
返回一个新的 MediaQueryList 对象，可用于检查文档是否匹配媒体查询。 |
| moveBy() |
相对于当前位置更改窗口的位置。 |
| moveTo() |
绝对地更改窗口的位置。 |
| open() |
打开一个新窗口。 |
| postMessage() |
用于向另一个窗口发送消息。 |
| print() |
允许打印窗口。 |
| prompt() |
允许显示提示框以获取用户输入。 |
| requestAnimationFrame() |
告诉浏览器您想执行一个动画，并请求浏览器在下次重绘之前更新动画。 |
| requestIdleCallback() |
设置回调函数，在浏览器空闲时调用。 |
| resizeBy() |
按特定数量的像素调整窗口大小。 |
| resizeTo() |
改变窗口的大小。 |
| scrollTo() |
滚动窗口到绝对位置。 |
| scrollBy() |
相对于当前位置滚动窗口。 |
| setImmediate() |
分割长时间运行的操作，并且当浏览器完成其他操作后立即运行回调函数。 |
| setInterval() |
用于每隔一定间隔执行特定动作。 |
| setTimeout() |
用于在特定时间之后执行特定动作。 |
| stop() |
停止窗口加载。 |
下面，我们将通过例子来说明其中的一些方法。
JavaScript window.alert() 方法
window.alert() 方法允许您展示包含消息、警告等的弹出对话框。它接受一个字符串文本作为参数。
示例
在下面的例子中，当你点击按钮时，它会调用 alert_func() 函数并在顶部中间显示弹出框。
<html>
<body>
<button onclick="alert_func()">执行警告</button>
<script>
function alert_func() {
window.alert("alert_func 函数被执行！");
}
</script>
</body>
</html>
JavaScript window.open() 方法
window.open() 方法用于打开一个新窗口。它接受一个需要在新窗口中打开的 URL 作为参数。
示例
在下面的代码中，我们使用 window.open() 方法在浏览器中打开一个新窗口。你可以看到代码在新窗口中打开了 'tutorialspoint' 网站的主页。
<html>
<body>
<button onclick="openWindow()">打开新窗口</button>
<script>
function openWindow() {
window.open("https://www.tutorialspoint.com/");
}
</script>
</body>
</html>
JavaScript window.print() 方法
window.print() 方法允许您打印网页。
示例
在下面的代码中，点击按钮即可打印网页。
<html>
<body>
<h2>你好，世界！</h2>
<button onclick="printPage()">打印网页</button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>