”;
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>
”;