Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com

Table of contents

1.

Introduction:

2.

Window Size:

3.

New Window:

4.

Resize a Window:

5.

Move a Window:

6.

Window Object Properties

7.

Window Object Methods

8.

Frequently Asked Questions:

9.

Key Takeaways:

Last Updated: Jun 30, 2023

Window Object

Author Jessica Mishra

Introduction:

BOM(Browser Object Model) is the core of JavaScript. It is a convention specific to the browser that helps in communicating with the browser.

The window object represents the browser window. It is an object of the browser which is automatically created by the browser itself.

In this blog, we will look at the window object in detail.

Window Size:

When it comes to the window object, there are four properties to determine the size:

window.innerHeight: returns the height of the page viewport in the browser window in pixels
window.innerWidth: returns the width of the page viewport in the browser window in pixels
window.outerHeight: returns the height of the browser window itself
window.outWidth: returns the height of the browser window itself

Code:

<!DOCTYPE html>
<html>
<body>


<h2>Window</h2>


<p id="demo"></p>


<script>
document.getElementById("demo").innerHTML =
"Browser inner window width: " + window.innerWidth + "px<br>" +
"Browser inner window height: " + window.innerHeight + "px<br>"+
"Browser outer window width: " + window.outerWidth + "px<br>" +
"Browser outer window height: " + window.outerHeight + "px";
</script>


</body>
</html>

Output:

New Window:

window.open() is the method used to open a new window. It accepts three arguments: URL, window target, and window features. Window features contain a string of information about the new window like width, height, etc.

window.open(url, windowName, [windowFeatures]);

You can also try this code with Online Javascript Compiler

Resize a Window:

window.resizeTo() is the method used to resize the window. It takes width and height as the arguments.

window.resizeTo(width,height);

You can also try this code with Online Javascript Compiler

We can also use window.resizeBy() method to resize by specific amount.

window.resizeBy(deltaX,deltaY);

You can also try this code with Online Javascript Compiler

Move a Window:

window.moveTo() is the method used to move the window to a specified coordinate. It takes x(horizontal), and y(vertical) coordinates as arguments.

window.moveTo(x, y);

You can also try this code with Online Javascript Compiler

If we have to move coordinates by a certain amount, then we can do it by:

window.moveBy(deltaX,deltaY);

You can also try this code with Online Javascript Compiler

Window Object Properties

Property	Description
closed	Returns a Boolean value indicating whether a window has been closed or not.
console	Returns a reference to the Console object, which provides methods for logging information to the browser's console
defaultStatus	Sets or returns the default text in the statusbar of a window
document	Returns the Document object for the window.
frameElement	Returns the <iframe> element in which the current window is inserted
frames	Returns all <iframe> elements in the current window
history	Returns the History object for the window.
innerHeight	Returns the height of the window's content area (viewport) including scrollbars
innerWidth	Returns the width of a window's content area (viewport) including scrollbars
length	Returns the number of <iframe> elements in the current window
localStorage	Allows to save key/value pairs in a web browser. Stores the data with no expiration date
location	Returns the Location object for the window.
name	Sets or returns the name of a window
navigator	Returns the Navigator object for the window.
opener	Returns a reference to the window that created the window
outerHeight	Returns the height of the browser window, including toolbars/scrollbars
outerWidth	Returns the width of the browser window, including toolbars/scrollbars
pageXOffset	Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
pageYOffset	Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window

Window Object Methods

Method	Description
alert()	Displays an alert box with a message and an OK button
atob()	Decodes a base-64 encoded string
blur()	Removes focus from the current window
btoa()	Encodes a string in base-64
clearInterval()	Clears a timer set with setInterval()
clearTimeout()	Clears a timer set with setTimeout()
close()	Closes the current window
confirm()	Displays a dialog box with a message and an OK and a Cancel button
focus()	Sets focus to the current window
getComputedStyle()	Gets the current computed CSS styles applied to an element
getSelection()	Returns a Selection object representing the range of text selected by the user
matchMedia()	Returns a MediaQueryList object representing the specified CSS media query string
moveBy()	Moves a window relative to its current position
moveTo()	Moves a window to the specified position
open()	Opens a new browser window
print()	Prints the content of the current window
prompt()	Displays a dialog box that prompts the visitor for input
requestAnimationFrame()	Requests the browser to call a function to update an animation before the next repaint
resizeBy()	Resizes the window by the specified pixels

Frequently Asked Questions:

What is the difference between BOM and DOM in JavaScript?

Ans-> DOM (Document Object Model) is used for interacting with objects in HTML and XML(Extensible Markup Language) documents. BOM(Browser Object Model) is a convention referring to all the functionalities of a web browser.

2. What is the difference between a document object and window object?

Ans-> The document object is HTML, XML, PHP, or other document loaded into the browser, and the window is the first thing loaded into the browser. The document is loaded inside the window object.

3. What is the difference between screen and window property?

Ans-> A window object returns information about both the window and the viewport. The screen object refers to the actual monitor window or desktop size.

Key Takeaways:

In this blog, we talked about the window object of the browser and its methods. The window object represents the browser window. If you enjoyed this blog about window objects, check out Web Technologies.

If you are preparing for your next web development interview, check out the blogs, 25 CSS Interview Questions, and 30 JavaScript interview questions.

Live masterclass

Get hired as an Amazon SDE : Resume building tips

by Anubhav Sinha, SDE2 @ Amazon

05 Nov, 2024

01:30 PM

412+ registered

Google Data Analyst Roadmap: Get Practical Insights

by Maaheen Jaiswal, Data Analyst @ Google

30 Oct, 2024

01:30 PM

1106+ registered

Get hired as an Amazon SDE : Resume building tips

by Anubhav Sinha, SDE2 @ Amazon

05 Nov, 2024

01:30 PM

412+ registered

Google Data Analyst Roadmap: Get Practical Insights

by Maaheen Jaiswal, Data Analyst @ Google

30 Oct, 2024

01:30 PM

1106+ registered

View more events