Javascript 简明教程

JavaScript - Window Object

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

所有 JavaScript 全局变量都是窗口对象的属性。所有全局函数都是窗口对象的方法。此外，当浏览器在“iframe”中呈现内容时，它将为浏览器和每个 iframe 创建单独的“窗口”对象。

在这里，你将学习如何将“窗口”对象用作全局对象并使用窗口对象的属性和方法。

Window Object as a Global Object

由于“window”是 Web 浏览器中的全局对象，因此可以使用 window 对象通过代码中的任何位置来访问全局变量、函数、对象等。

让我们通过以下示例了解它。

Example

在下面的代码中，我们在函数内部定义了“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 Object Properties

“window”对象包含各种属性，返回有关当前窗口的状态和信息。

下面，我们对“window”对象的所有属性进行了说明。可以使用“window”作为这些属性的引用进行访问。

Property Name

Property Description

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

它允许您访问当前窗口的“sessionStorage”对象。

speechSynthesis

它允许您使用 Web Speech API。

visualViewPort

它返回一个包含当前窗口视口的对象。

top

它包含指向最顶层窗口的引用。

在这里，我们将用一些示例来介绍一些属性。

OuterHeight/OuterWidth Properties of the Window object

window 对象的 outerHeight 属性返回窗口的高度，window 对象的 outerWidth 属性返回窗口的宽度。

Example

在下面的代码中，我们使用了 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 Property of the Window Object

window screenLeft 属性返回当前窗口的左位置。

Example

在下面代码的输出中，你可以看到当前窗口左位置的像素。

<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 Object Methods

window 对象还包含与属性类似的方法来操作当前浏览器窗口。

在下表中，我们用它们的描述介绍了 window 对象的方法。你可以使用 window 作为引用来访问和调用以下方法，以使代码可读。

Method Name

Method Description

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() Method

window.alert() 方法允许您显示包含消息、警告等的弹出对话框。它将字符串文本作为参数。

Example

在下例中，当您点击按钮时，它将调用 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() Method

window.open() 方法用于打开一个新窗口。它将一个 URL 作为参数，您需要在一个新窗口中打开它。

Example

在下面的代码中，我们使用 window.open() 方法在浏览器中打开一个新窗口。您会看到该代码在新窗口中打开“教程点”网站的主页。

<html>
<body>
   <button onclick = "openWindow()"> Open New Window </button>
   <script>
      function openWindow() {
         window.open("https://www.tutorialspoint.com/");
      }
   </script>
</body>
</html>

JavaScript window.print() Method

window.print() 方法允许您打印网页。

Example

在下例中，点击该按钮可以打印该网页。

<html>
<body>
   <h2> Hello World! </h2>
   <button onclick = "printPage()"> Print Webpage </button>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>