Javascript 简明教程

JavaScript - Window Object

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

The JavaScript window object represents the browser’s window. In JavaScript, a 'window' object is a global object. It contains the various methods and properties that we can use to access and manipulate the current browser window. For example, showing an alert, opening a new window, closing the current window, etc.

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

All the JavaScript global variables are properties of window object. All global functions are methods of the window object. Furthermore, when the browser renders the content in the 'iframe’, it creates a separate 'window' object for the browser and each iframe.

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

Here, you will learn to use the 'window' object as a global object and use the properties and methods of the window object.

Window Object as a Global Object

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

As 'window' is a global object in the web browser, you can access the global variables, functions, objects, etc., using the window object anywhere in the code.

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

Let’s understand it via the example below.

Example

在下面的代码中，我们在函数内部定义了“num”全局变量和局部变量。另外，我们定义了“car”全局对象。

In the below code, we have defined the 'num' global and local variables inside the function. Also, we have defined the 'car' global object.

在 test() 函数中，我们使用“window”对象访问全局 num 变量的值。

In the test() function, we access the global num variable’s value using the 'window' object.

<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”对象从特定块使特定变量全局化。

You may also use the 'window' object to make a particular variable global from a particular block.

Window Object Properties

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

The 'window' object contains the various properties, returning the status and information about the current window.

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

Below, we have covered all properties of the 'window' object with a description. You may use the 'window' as a reference to access these properties.

Property Name

Property Description

closed

When the particular window is closed, it returns true.

console

It returns the window’s console object.

customElements

It is used to define and access the custom elements in the browser window.

devicePixelRatio

It returns the physical pixel ratio of the device divided by CSS pixel ratio.

document

It is used to access the HTML document opened in the current window.

frames

It is used to get the window items like iframes, which are opened in the current window.

frameElement

It returns the current frame of the window.

history

It is used to get the history object of the window.

innerHeight

It returns the inner height of the window without including the scroll bar, toolbar, etc.

innerWidth

It returns the inner width of the window without including the scroll bar, toolbar, etc.

length

It returns the total number of iframes in the current window.

localStorage

It is used to access the local storage of the current window.

location

It is used to access the location object of the current window.

name

It is used to get or set the name of the window.

navigator

It is used to get the Navigator object of the browser.

opener

It returns a reference to the window from where the current window is opened.

outerHeight

It returns the total height of the window.

outerWidth

It returns the total width of the window.

pageXOffset

It returns the number of pixels you have scrolled the web page horizontally.

pageYOffset

It returns the number of pixels you have scrolled the web page vertically.

parent

It contains the reference to the parent window of the current window.

scheduler

It is entry point for using the prioritized task scheduling.

screen

It returns the 'screen' object of the current window.

screenLeft

It returns the position of the x-coordinate of the current window relative to the screen in pixels.

screenTop

It returns the position of the y-coordinate of the current window relative to the screen in pixels.

screenX

It is similar to the screenLeft property.

screenY

It is similar to the screenTop property.

scrollX

It is similar to the pageXOffset.

scrollY

It is similar to the pageYOffset.

self

It is used to get the current state of the window.

sessionStorage

It lets you access the 'sessionStorage' object of the current window.

speechSynthesis

It allows you to use the web speech API.

visualViewPort

It returns the object containing the viewport of the current window.

top

It contains a reference to the topmost window.

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

Here, we will cover some properties with examples.

OuterHeight/OuterWidth Properties of the Window object

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

The outerHeight property of the window object returns the window’s height, and the outerWidth property of the window object returns the window’s width.

Example

在下面的代码中，我们使用了 outerHeight 和 outerWidth 属性来获取窗口的维度。你可以更改窗口的大小并观察这些属性值的变化。

In the code below, we used the outerHeight and outerWidth property to get the dimensions of the window. You can change the size of the window and observe changes in the value of these properties.

<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 属性返回当前窗口的左位置。

The window screenLeft property returns the left position of the current window.

Example

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

In the output of the below code, you can see the left position of the current window in pixels.

<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 对象还包含与属性类似的方法来操作当前浏览器窗口。

The 'window' object also contains methods like properties to manipulate the current browser window.

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

In the below table, we have covered the methods of the 'window' object with their description. You may use 'window' as a reference to access and invoke the below methods to make the code readable.

Method Name

Method Description

alert()

It is used to show the alert message to the visitors.

atob()

It converts the string into the base-64 string.

blur()

It removes the focus from the window.

btoa()

It decodes the base-64 string in the normal string.

cancelAnimationFrame()

It cancels the animation frame scheduled using the requestAnimationFrame() method.

cancelIdleCallback()

It cancels a callback scheduled with the requestIdCallback() method.

clearImmediate()

It is used to clear actions specified using the setImmediate() method.

clearInterval()

It resets the timer you have set using the setInterval() method.

clearTimeout()

It stops the timeout you have set using the setTimeOut() method.

close()

It is used to close the current window.

confirm()

It shows the confirm box to get the confirmation from users.

focus()

It focuses on the current active window.

getComputedStyle()

It returns the current window’s computed CSS style.

getSelection()

It returns the selection object based on the selected text range.

matchMedia()

It returns a new MediaQueryList object, which you can use to check whether the document matches the media queries.

moveBy()

It changes the position of the window relative to the current position.

moveTo()

It changes the position of the window absolutely.

open()

It opens a new window.

postMessage()

It is used to send a message to a window.

print()

It lets you print the window.

prompt()

It allows you to show a prompt box to get user input.

requestAnimationFrame()

It helps you to tell the browser that you want to perform an animation so the browser can update the animation before the next repaint.

requestIdleCallback()

It sets the callback functions to be called when the browser is Idle.

resizeBy()

It resizes the window by a particular number of pixels.

resizeTo()

It changes the size of the window.

scrollTo()

It scrolls the window to the absolute position.

scrollBy()

It scrolls the window relative to the current position.

setImmediate()

It breaks up long-running operations and runs the callback function instantly when the browser completes other operations.

setInterval()

It is used to execute a particular action after every interval.

setTimeout()

It is used to execute a particular action after a particular time.

stop()

It stops the loading of window.

这里，我们将用示例介绍一些方法。

Here, we will cover some methods with examples.

JavaScript window.alert() Method

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

The window.alert() method allows you to show the pop-up dialog containing the message, warning, etc. It takes the string text as an argument.

Example

在下例中，当您点击按钮时，它将调用 alert_func() 函数并在顶部中间显示弹出框。

In the below example, when you click the button, it will invoke the alert_func() function and show the pop-up box at the middle top.

<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 作为参数，您需要在一个新窗口中打开它。

The window.open() method is used to open a new window. It takes a URL as an argument, which you need to open in a new window.

Example

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

In the below code, we used the window.open() method to open a new window in the browser. You can see that the code opens the home page of the 'tutorialspoint' website in the new window.

<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() 方法允许您打印网页。

The window.print() method lets you print the web page.

Example

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

In the below code, click the button to print the web page.

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