JavaScript Basic Tutorial

JavaScript Objects

JavaScript Functions

JS HTML DOM

JS Browser BOM

AJAX Basic Tutorial

JavaScript Reference Manual

JS Window Screen JS DOM Navigation

JS Window Browser Object Model

The window can be the main window, a frameset, or a single frame, or even a new window created with JavaScript.

window object

ThewindowAn object representing the window in the browser. The window object is automatically created by the browser.

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

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

The document object is a property of the window object. Therefore, input

window.document.write("Hello world")

is the same as the one below

document.write("Hello world")

Calculating window size

The window object provides2These properties can be used to find the width and height of the browser window viewport.

These two properties both return sizes in pixels:

window.innerWidth -The internal width of the browser window (in pixels)
window.innerHeight -The internal height of the browser window (in pixels)

This is an example of displaying the current size of the window:

Example

var h = window.innerHeight;
var w = window.innerWidth;

Test see‹/›

For Internet Explorer 5,6,7,8:

document.documentElement.clientWidth
document.documentElement.clientHeight

either

document.body.clientWidth
document.body.clientHeight

Cross-browser solution (for IE8and earlier versions used clientWidth and clientHeight):

Example

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

Test see‹/›

Display height and width using the onresize event:

Example

<body onresize="myFunc()">
<script>
function myFunc() {
　　　var w = window.innerWidth;
　　　var h = window.innerHeight;
　　　document.getElementById("para").innerHTML = "Width: "　+　w　+　"<br>Height: "　+　h;
}
</script>

Test see‹/›

Open a new window

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

The following examples open a new window with specified height and width for "www.oldtoolbag.com":

Example

window.open("https://www.oldtoolbag.com", "", "width=400, height=300");

Test see‹/›

Complete Window Reference

For a complete reference to properties and methods, please visit ourJavaScript Window Object Reference>.

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

JS Window Screen JS DOM Navigation