JavaScript BOM Window Object

BOM - Window Object

Window :

We have seen how the content and style for a given HTML page can be modified using BOM model's object 'document'.

Now, consider a scenario where you do not want to update the HTML page but only certain properties of the browser window on which it is rendered. Maybe, you want to navigate to a different URL and bring a new web page, or you want to close the web page or you want to store some data related to the web page. Well, to implement this, we would need an object that represents the entire browser window and allows us to access and manipulate the window properties. BOM model provides us 'window' object.

This object resides on top of the BOM hierarchy. It's methods give us access to the toolbars, status bars, menus and even the HTML web page currently displayed.

We will explore following properties and methods that help us manipulate the browser window:

Property Description Example
innerHeight Holds inner height of window‘s content area var inHeight = window.innerHeight; console.log(" Inner height: " + inHeight); //Returns Inner height: 402
innerWidth Holds inner width of window‘s content area var inWidth = window.innerWidth; console.log("Inner width: " + inWidth); //Returns Inner width: 1366
outerHeight Holds outer height of window including toolbars and scrollbars var outHeight = window.outerHeight; console.log("Outer height: "+ outHeight); //Returns Outer height: 728
outerWidth Holds outer width of window including toolbars and scrollbars var outWidth = window.outerWidth; console.log("Outer width of window: " + outWidth); //Returns Outer width: 1366
localStorage Allows access to object that stores data without any expiration date localStorage.setItem(‘username’,‘Bob’); console.log("Item stored in localStorage is" + localStorage.getItem(‘username’)); //Returns Item stored in localStorage is Bob
sessionStorage Allows access to object that stores data valid only for the current session sessionStorage.setItem(‘password’, ‘Bob@123’); console.log("Item stored in sessionStorage is " + sessionStorage.getItem(‘password’)); //Returns Item stored in sessionStorage is Bob@123

In addition to these methods, 'window' object gives us a few more methods that are helpful in the following way:

Method Description Example
open() Opens a new window'');
close() Closes current window window.close();
#window_object_in_javascript #Window_Object_javascript #window_object_properties_in_javascript #js_window_object #window_object_methods_in_javascript #window_object_in_javascript_example

(New page will open, for Comment)

Not yet commented...