JavaScript - Window 对象
JavaScript window 对象代表浏览器的窗口。在 JavaScript 中，"window"对象是一个全局对象。它包含各种方法和属性，我们可以用来访问和操作当前浏览器窗口。例如，显示警告框、打开新窗口、关闭当前窗口等。
所有 JavaScript 全局变量都是 window 对象的属性。所有全局函数都是 window 对象的方法。此外，当浏览器渲染 iframe 中的内容时，它会为浏览器和每个 iframe 创建一个单独的 window 对象。
在这里，您将学习如何将 window 对象用作全局对象，以及如何使用 window 对象的属性和方法。
Window 对象作为全局对象
由于 window 在 Web 浏览器中是一个全局对象，因此您可以在代码中的任何位置使用 window 对象访问全局变量、函数、对象等。
让我们通过下面的示例来理解。
示例
在下面的代码中，我们在函数内部定义了全局变量 num 和局部变量。此外，我们还定义了全局对象 car。
在 test() 函数中，我们使用 window 对象访问全局变量 num 的值。
<html>
<body>
<div id = "output1">The value of the global num variable is: </div>
<div id = "output2">The value of the local num variable is: </div>
<div id = "output3">The value of the car object is: </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>
输出
The value of the global num variable is: 100 The value of the local num variable is: 300 The value of the car object is: Honda
您还可以使用"window"对象将特定变量从特定块中设置为全局变量。
Window 对象属性
"window"对象包含各种属性，用于返回当前窗口的状态和信息。
下面，我们介绍了"window"对象的所有属性及其描述。您可以使用"window"作为引用来访问这些属性。
| 属性名称 | 属性描述 |
|---|---|
| closed | 当特定窗口关闭时，返回 true。 |
| 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 | 它允许您访问当前窗口。 |
| speechSynthesis | 它允许您使用 Web 语音 API。 |
| visualViewPort | 它返回包含当前窗口视口的对象。 |
| top | 它包含对最顶层窗口的引用。 |
这里，我们将通过示例介绍一些属性。
Window 对象的 OuterHeight/OuterWidth 属性
Window 对象的 outerHeight 属性返回窗口的高度，window 对象的 outerWidth 属性返回窗口的宽度。
示例
在下面的代码中，我们使用了 outerHeight和 outerWidth 属性用于获取窗口的尺寸。您可以更改窗口的大小并观察这些属性值的变化。
<html>
<body>
<p id = "output1">The outer width of the window is: </p>
<p id = "output2">The outer height of the window is: </p>
<script>
const outerHeight = window.outerHeight;
const outerWidth = window.outerWidth;
document.getElementById("output1").innerHTML += outerWidth;
document.getElementById("output2").innerHTML += outerHeight;
</script>
</body>
</html>
输出
The outer width of the window is: 1536 The outer height of the window is: 816
Window 对象的 ScreenLeft 属性
Window 的 screenLeft 属性返回当前窗口的左侧位置。
示例
在以下代码的输出中，您可以看到当前窗口的左侧位置(以像素为单位)。
<html>
<body>
<div id = "output">Your browser window is left by: </div>
<script>
const screenLeft = window.screenLeft;
document.getElementById("output").innerHTML += screenLeft + " px.";
</script>
</body>
</html>
输出
Your browser window is left by: 0 px.
Window 对象方法
"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()"> Execute Alert </button>
<script>
function alert_func() {
window.alert("The alert_func funciton is executed!");
}
</script>
</body>
</html>
JavaScript window.open() 方法
window.open() 方法用于打开一个新窗口。它接受一个 URL 作为参数，您需要在新窗口中打开该 URL。
示例
在下面的代码中，我们使用 window.open() 方法在浏览器中打开一个新窗口。您可以看到该代码在新窗口中打开了"tutorialspoint"网站的主页。
<html>
<body>
<button onclick = "openWindow()"> Open New Window </button>
<script>
function openWindow() {
window.open("https://www.cainiaomax.com/");
}
</script>
</body>
</html>
JavaScript window.print() 方法
window.print() 方法允许您打印网页。
示例
在下面的代码中，点击按钮即可打印网页。
<html>
<body>
<h2> Hello World! </h2>
<button onclick = "printPage()"> Print Webpage </button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
