JavaScript Introduction | Browser Object Model | Window Object

Window Object

The window object represents a web browser window and is supported by most web browsers.

All JavaScript objects, global functions, and global variables automatically become properties of the window object. Methods of the window object are global functions, and properties of the window object are global variables. Elements in the Document Object Model (DOM) also become properties of the window object.

Browser Window Size

You can use the innerHeight and innerWidth properties of the window object to get the size of the browser window. Here, the browser window means the viewport of the web browser, excluding the browser toolbar and scroll bars.

Syntax

// Basic syntax
window.innerHeight
window.innerWidth
// Syntax 1 for Internet Explorer versions 5 through 7 only
document.documentElement.clientHeight
document.documentElement.clientWidth
// Syntax 2 for Internet Explorer versions 5 through 7 only
document.body.clientHeight
document.body.clientWidth

The following example returns the window size in all browsers by using the syntax above.

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.write("The web browser is " + windowWidth + " pixels wide and " + windowHeight + " pixels high.");

When using any method or property of the window object, you can omit the window prefix. Therefore, in the example above, using just innerWidth instead of window.innerWidth still works correctly.

The following example shows several cases where the window prefix can be omitted.

alert("You can omit the window prefix when calling a global function!");   // Global function
document.write("The current horizontal position of the browser is " + screenX + ".<br>"); // Global variable
document.write("The current vertical position of the browser is " + screenY + ".<br>");   // Global variable
document.write(document.title);                                           // Global object

As shown above, you can omit the window prefix when using all JavaScript global objects, global functions, and global variables.

screenX returns the distance between the left edge of the browser window and the left edge of the user’s screen. screenY returns the distance between the top edge of the browser window and the top edge of the user’s screen.

Opening a New Browser Window

You can use the open() method of the window object to open a new browser window. You can also configure detailed options for the new browser window one by one.

The following example opens a new browser window that has only a menu bar, address bar, resize handle, scroll bars, and status bar.

var newWindowObj;
// You can configure the options for the new browser window one by one with strWindowFeatures.
var strWindowFeatures = "menubar = yes,location = yes,resizable = yes,scrollbars = yes,status = yes";
function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML Overview", strWindowFeatures);
}

Closing a Browser Window

You can use the close() method of the window object to close the current browser window or a specific browser window.

function openWindow() {
    newWindowObj = window.open("/html/intro", "HTML Overview", strWindowFeatures);
}
function closeNewWindow() { // You can close the newly opened browser window again by using the window object.
    newWindowObj.close();
}

Document Object

One of the most important properties of the window object is the document object. The document object represents the document, which is the content displayed in the browser window.