- Closing the window
- The title
- Moving and resizing the window
- Scrolling the window
- System-related properties
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 usingwindow.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 andy
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:
System-related properties
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.