tutorialstonight logo
A Platform To Learn To Code

JAVASCRIPT WINDOW



What is Javascript BOM?

BOM Stands for Browser Object Model. BOM is an object structure created by a browser for any webpage. It is a hierarchy of browser objects which allow javascript to interact with browsers. With BOM you can work with everything except the document.

browser object model (BOM)

Javascript window

The window object represents the frame or window in which the webpage is contained in the browser. The window object is a Global object, its properties and functions can be accessed without referring to it. Example: window.alert() is used to alert something but we can directly use alert() without referring to window object.

The window is the root object, even the document is the property of the window object. it can be used to find out screen height, screen width, history, localStorage, location, events etc.

Everything that is visible and non-visible on a webpage all are part of the window.

Example


window Size

The window object has 4 different properties to get the height and width of the window.

Two properties represent inner dimensions of window :

  • innerHeight
  • innerWidth

To use this property use it with a window object, see in the example.

Example

Run the code

The other two properties represent outer dimension of window :

  • outerHeight
  • outerWidth

Example

Run the code

Open a new window using javascript

The window interface has the open() method which loads a new window or new tab on the browser with a given URL.

Syntax:

window.open(URL, windowName, [windowFeatures]);
  • URL: The url address you want to go
  • windowName: (Optional) window name is given as a target for hyperlinks and forms. However it is not required, window need not to have name
  • windowFeatures: This contains a comma separated a list of features in form of "name=value". These features includes options such as position, size, weather or not to include toolbar etc.

Example

Run the code

Resize a window

The window interface has resizeTo() method which can resize the size of window to the passed value. Example window.resizeTo(width, height)

Example

Run the code

Close window

To close a window use close() method referring to the window object which you want to close.

Example

Run the code

In the above example we store the reference of the window in myWindow variable and use it as reference to close it.

Javascript Window Navigator