Browser window properties and methods

  1. Closing the window
  2. The title
  3. Moving and resizing the window
  4. Scrolling the window
  5. System-related properties
    1. The navigator property
    2. The screen property

The dualistic window object provides global JavaScript object and browser window interface.

In this section we concentrate on the browser part.

Window has a lot in common with DOM elements. Many events ultimately bubble to window and can be caught by its handlers.

But there are several specific methods.

Closing the window

window.closed
The window.closed is true only if the window is closed. Used to check if the popup is still open or not.
window.close
Silently closes the popup.

Actually, you can call close on any window, but if the window was not opened using window.open, the browser may ignore the call or ask for confirmation.

Press the button below to close current window.

Try it in Firefox and IE. At the time of writing, Firefox ignores the call and IE8 asks for confirmation.

The title

The window title is shown according to the TITLE element in HEAD.

Funny it is, but the most reliable way to change the title is not to update it’s contents. The title is also not in the window object, but inside the document.

To change the title, modify the document.title property.

The example below updates window title to current time.

setInterval(function() { 
  document.title = +new Date() 
}, 1000)

The +new Date() is the current date in microseconds. Run it and notice how the window title updates every second.

Moving and resizing the window

There are several methods for move/resize a window, which is not maximized.

win.moveBy(x,y)
Moves the window relatively x pixels right and y pixels down. Negative values are accepted.
win.moveTo(x,y)
Moves the window to the given coordinates on the screen.
win.resizeBy(width,height)
Resize the window by the given width/height. Negative parameters are accepted.
win.resizeTo(width,height)
Resize the window to the given size.

Scrolling the window

The scrolling is one of most used abilities.

win.scrollBy(x,y)
Scrolls the window by the given number of pixels right and down. Negative values are accepted.
win.scrollTo(x,y)
Scrolls the window to the given coordinates.

Another very useful method of scrolling is not related to window.

The syntax is: elem.scrollIntoView(alignWithTop). It forces the window to scroll to make the element visible.

If alignWithTop=true or not given, then the top of the elem will be match the window top (if possible). If the parameter is false, then the bottom of the elem will be aligned against the window bottom. Again, if possible.

Try it out by clicking on the buttons below:

The navigator property

The object which contains information about OS, browser, plugins (except IE), user agent etc.

See them by running the example below.

<script>
for(prop in navigator) {
  document.write(prop+': '+navigator[prop]+'<br>')
}
</script>

The exact set of properties depends on the browser, see MSDN window.navigator page and MDN window.navigator page for instance.

The only property which is somewhat often used is navigator.userAgent. It is checked for browser sniffing to work around incompatibilities. But that’s not recommended. You should try to check features support, not the browser.

The screen property

The screen property provides information about the whole screen, it’s width, height, color depth etc.

Run the example below to see what it is like:

<script>
for(prop in screen) {
  document.write(prop+': '+screen[prop]+'<br>')
}
</script>

The screen property is extremely rarely used. Refer to the MDN window.screen page about it’s details.

Tutorial

Donate

Donate to this project