JavaScript - Window Object

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.

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

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

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

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>

Output

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

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

Window Object Properties

The 'window' object contains the various properties, returning the status and information about the current 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

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

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>

Output

The outer width of the window is: 1536
The outer height of the window is: 816

ScreenLeft Property of the Window Object

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>

Output

Your browser window is left by: 0 px.

Window Object Methods

The 'window' object also contains methods like properties to manipulate the current browser 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

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

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

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

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

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>