Using the Window object in JavaScript

Window is an object that corresponds to the window that displays a Web page. Such a window can be created dynamically.
This is not a JavaScript object, and it is not defined by the W3C DOM specification. It is a de facto standard.

The attributes and methods of the interface window are recognized by Internet Explorer 4, Firefox 1, Opera 9, newer versions and Safari. This document is based on what is supported by the browsers in the absence of official standard, see references.

The current window is referenced by the keyword window, and windows dynamically created by the name given to the object assigned by the return value of the open method.

Defintion and test of attributes and inner objects in window

Definitions of attributes and inner objets

These attributes can be read only for some, their value can be assigned otherwise.

frames[]
The frames in the window. Read only.
length
Number of frames. Read only.
name
Name of the window.
status
Text of the status bar
Under Firefox, modification of the text is an option. Go to Options, Content, JavaScript and click the Advanced button. Then check the box next to "Change the text of the status bar."
defaultStatus
Default text in statusbar.
closed
State closed or not.
opener
Reference on the window that opened this window. Example:
x = window.opener;
parent
The window parent of a window. Example:
x = mywin.parent;
top
The parent of the highest level.

Objects in window

These objects have their own attributes and methods that are not detailed here but they have their own page.

document
Refers to a page, that is contained in the window. Document.
history
List of pages previously viewed in the same window. History.
location
Designates the URL of a page that contains the window. Location.
screen
The screen and its properties: width, height, availWidth, availHeight, colorDepth.

See also the properties for window creation in the chapter: Opening a new window in JavaScript.

Checking properties of the Windows object in the browser

Properties not supported by a browser are undefined.
Some properties are used as parameters of the window's constructor but they are not directly accessible and not listed here.

innerWidth innerHeight

outerWidth outerHeight

locationbar menubar personalbar statusbar toolbar scrollbars

pageXOffset pageYOffset

screenX screenY

directories

status defaultStatus

opener

parent

top

name

length

Do not work with Firefox 7

offscreenBuffering

We can obtain equivalent values in Internet Explorer and with all browsers:

document.body.clientHeight

document.body.clientWidth

document.body.offsetHeight

document.body.offsetWidth

document.documentElement.offsetHeight

document.documentElement.offsetWidth

Others

Crypto

Warning: The DOCTYPE declaration could have an effect on these values.

Methods of window and demos

The methods to open or close a windows are described in the chapter: Opening a new window in JavaScript.

Definitions of methods
alert(message)
Displays a message.
x = prompt(message)
Presents a dialog box requesting a user response and returns the answer.
x = confirm(message)
Displays a message, a question normally, with two buttons to confirm or cancel. Returns true or false.
resizeTo(w, h)
Resizes the width and height.
scrollTo(x, y)
Scrolling must be enabled for the window according to scrollbars flag, this is the case by default.
moveTo(x, y)
Move to the given position.
id = setInterval(expression, milliseconds)
Evalue an expression repeatedly according to the time in interval.
clearInterval(id)
Clear the interval.
id = setTimeout(expression, milliseconde)
Evalue an expression after the deadline.
clearTimeout(id)
Clear the delay.
focus()
Pass the focus to the window.
blur()
Suppress the focus to the current/given window.
createPopup()
Create a sub-window.
print()
Start the printing of the contents of the window.
Demonstration of methods of the HTML window objet Click on a button to see how a method works. The corresponding code is displayed at right.

alert('Hello!');

alert( prompt('Type some text:') );

onclick="alert(confirm('Confirm?'))"

onclick="alert(window.length)"

onclick="window.name='hello'; alert(window.name)"

See note in the article for Firefox.
onclick="window.status=document.myform.stat.value"

onclick="window.scrollTo(100,0)"

onclick="window.scrollTo(10,10)"

onclick="window.resizeTo(600,600)"

See also

An example of use of setTimeout is included in the lightbox with fade in effect demo.

References

An early specification by the W3C, Window Object, is abandoned because it is replaced by the HTML 5 specification in work which includes a definition of that object.

© 2008-2012 Xul.fr