JavaScript - 窗口对象

JavaScript 的window对象代表浏览器的窗口。在 JavaScript 中，'window' 对象是一个全局对象。它包含各种方法和属性，我们可以使用它们来访问和操作当前浏览器窗口。例如，显示警报、打开新窗口、关闭当前窗口等。

所有 JavaScript 全局变量都是 window 对象的属性。所有全局函数都是 window 对象的方法。此外，当浏览器渲染 'iframe' 中的内容时，它会为浏览器和每个 iframe 创建一个单独的 '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' 作为引用来访问这些属性。

属性名称	属性描述
closed	当特定窗口关闭时，它返回 true。
console	它返回窗口的控制台对象。
customElements	它用于定义和访问浏览器窗口中的自定义元素。
devicePixelRatio	它返回设备的物理像素比除以 CSS 像素比。
document	它用于访问当前窗口中打开的 HTML 文档。
frames	它用于获取当前窗口中打开的窗口项，例如 iframe。
frameElement	它返回窗口的当前框架。
history	它用于获取窗口的历史对象。
innerHeight	它返回窗口的内部高度，不包括滚动条、工具栏等。
innerWidth	它返回窗口的内部宽度，不包括滚动条、工具栏等。
length	它返回当前窗口中 iframe 的总数。
localStorage	它用于访问当前窗口的本地存储。
location	它用于访问当前窗口的 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 语音 API。
visualViewPort	它返回包含当前窗口视口的对象。
顶层窗口 (top)	它包含对最顶层窗口的引用。

这里，我们将介绍一些属性及其示例。

窗口对象的 OuterHeight/OuterWidth 属性

窗口对象的 outerHeight 属性返回窗口的高度，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

窗口对象的 ScreenLeft 属性

窗口的 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”作为引用来访问和调用以下方法以提高代码的可读性。

方法名称	方法描述
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://tutorialspoint.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>

打印页面