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 |
window.open('http://www.facebook.com'); |
| close() |
Closes current window |
window.close(); |
