JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Window - The Browser Object Model

A window can be the main window, a frame set or individual frame, or even a new window created with JavaScript.


The Window Object

The window object represents a window in browser. An object of window is created automatically by the browser.

All global variables are properties and functions are methods of the window object.

All global JavaScript objects, functions, and variables automatically become members of the window object.

The document object is a property of the window object. So, typing

window.document.write("Hello world")

is same as

document.write("Hello world")

Calculating Window Size

The window object provides 2 properties to find out the width and height of the browser window viewport.

Both properties return the sizes in pixels:

Here is an example that displays the current size of the window:

Run code

For Internet Explorer 5, 6, 7, 8:

  • document.documentElement.clientWidth
  • document.documentElement.clientHeight

OR

  • document.body.clientWidth
  • document.body.clientHeight

A cross-browser solution (using clientWidth and clientHeight for IE8 and earlier):

Run code

Display height and width using onresize event:

Run code

Opening a new Window

The window.open() method opens a new browser window and loads the specified document into it.

The following example opens "parrot-tutorial.com" in a new window with specified height and width:

Run code

Complete Window Reference

For a complete properties and methods reference, visit our JavaScript Window Object Reference.

The reference section contains descriptions and examples of all window properties and methods.