JavaScript Kit > JavaScript Reference > Here
Window Object
The Window object is the top level object in JavaScript, and contains in itself several other objects, such as "document", "history" etc.
Related Tutorials
- Windows and JavaScript
- Loading two frames with one link
- Determining whether a browser window is open
- Moving, scrolling, and resizing browser window
- The onerror event of the window object
- Creating a live CSS clock using CSS3 and requestAnimationFrame()
Events
Events | Description |
---|---|
onblur | Fires when the window loses focus. |
onerror | Fires when a JavaScript
error occurs. By returning true inside this event,
JavaScript errors on the page (if any) are suppressed, with no error
messages popping up:
window.onerror=function(msg, url, linenumber){ See "The onerror event of the window object" for full details. |
onfocus | Fires when the focus is set on the current window. |
onload | Fires when the page has
finished loading, including images. This is a popular event to use
to run some JavaScript once everything on the page has loaded/ is
available: window.onload=function(){ The limitation with the above approach is that multiple calls to
|
onresize | Fires when the window is resized. |
onscroll | Fires when the window is
scrolled. The following shows the current y coordinate of the upper
left corner of the viewable window in the browser's title bar when
the page is scrolled:
window.onscroll=function(){ |
onbeforeunload | Fires when the page is about to be unloaded,
prior to window.onunload event firing. Supported in
all modern browsers. By setting event.returnValue to a
string, the browser will prompt the user whether he/she wants to
leave the current page when attempting to:
window.onbeforeunload=function(e){ |
onunload | Fires when the page is unloaded- process cannot be overruled at this point. Often used to run code cleanup routines. |
Properties
Properties | Description |
---|---|
closed | Returns the Boolean variable indicating whether window has been closed or not. Also see: "Determining whether a browser window is open or not". |
defaultStatus | Read/write property that reflects the default window status bar message that appears. |
document | Reference to the current document object. |
frames | An array referencing all of the frames
in the current window, including IFRAME elements. Use
frames.length to probe the number of
frames. The following changes the src property of every IFRAME on
the page to a blank page:<iframe
src="http://google.com"></iframe> If the current page is contained in a frame itself and you wish
to access another sibling frame, navigate up towards the topmost
frameset document first using the parent.frames[0] //access first frame within parent frameset. |
history | Reference to the History object of JavaScript, which contains information on the URLs the visitor has visited within the window. |
innerWidth, innerHeight - Supported in: Firefox/Opera/Safari, but NOT IE. |
Returns the width and height, in
pixels, of the window's viewable content area, which does not
include any toolbar, scrollbars etc. Note: IE equivalents
are " |
outerWidth, outerHeight - Supported in: Firefox/Opera/Safari, but NOT IE. |
Returns the width and height, in pixels, of the browser window in its entirety, which includes any toolbar, scrollbars etc. No IE equivalents. |
length | Returns the number of frames contained in the window, which includes IFRAMEs. |
location | Returns or sets the location object of
JavaScript, which contains information on the current URL. |
name | The name of the window as optionally
specified when calling window.open() . |
opener | Contains a reference to the window
that opened the secondary window via window.open() . This property
should be invoked in the secondary window. See "Creating
window remotes using the window.opener property". |
parent | Reference to the parent frameset window of the current window, assuming current window is a frame. Otherwise, it simply refers to current window. |
self | A synonym for the current window. |
status | A read/write property that allows you to probe and write to the browser's status bar. |
top | A synonym for the topmost browser window. |
window | References the current window. Same as
"self. " |
pageXOffset, pageYOffset - Supported in: Firefox/Opera/Safari, but NOT IE. |
Returns an integer representing the
pixels the current document has been scrolled from the upper left
corner of the window, horizontally and vertically, respectively. You
can also use window.scrollX and window.scrollY
instead for brevity, which are equivalent properties.Note: IE+ equivalents are
" |
screenX, screenY - Supported in: Firefox/Opera/Safari, but NOT IE. |
Specifies the x and y coordinates of
the window relative to the user's monitor screen. Note: IE+ equivalents are
" |
screenLeft, screenTop - IE only properties |
Specifies the x and y coordinates of the window relative to the user's monitor screen. |
Methods
Note: "[]" surrounding a parameter below means the parameter is optional.
Methods | Description |
---|---|
alert(msg) | Displays an Alert dialog box with the desired message and OK button. |
blur() | Removes focus from the window in question, sending the window to the background on the user's desktop. |
cancelAnimationFrame(ID) - IE10+, FF11+, Chrome and Safari 6+ |
Cancels an animation frame request set
using ID=requestAnimationFrame() . The following creates
a "universal" requestAnimationFrame method based on the
supported vendor prefixed version of your browser:
window.cancelAnimationFrame = window.cancelAnimationFrame Note: Older versions of Mozilla supported a prefixed
version of |
clearInterval(ID) | Clears the timer set
using var ID=setInterval() . |
clearTimeout(ID) | Clears the timer set
using var ID=setTimeout() . |
close() | Closes a window. |
confirm(msg) | Displays a Confirm dialog
box with the specified message and OK and Cancel buttons.
Returns either true or false, depending on which button the user has
clicked on, for example: var yourstate=window.confirm("Are you sure you are ok?") |
find(string,
[casesensitive], [backward]) - Firefox only property |
Searches for the "string" within the page, and returns string or false, accordingly. "casesensitive" is a Boolean denoting whether search is case sensitive. "backwards" is a Boolean when set to true, searches the page backwards. Final two optional parameters must be set together or none at all. |
focus() | Sets focus to the window, bringing it to the forefront on the desktop. |
home() - Firefox only property |
Navigates the window to the homepage as designated by the user's browser setting. |
moveBy(dx, dy) | Moves a window by the specified amount in pixels. |
moveTo(x, y) | Moves a window to the
specified coordinate values, in pixels. The following opens a window
and centers it on the user's screen: Demo: Open Window <script type="text/javascript"> |
open(URL, [name], [features], [replace]) | Opens a new browser
window. "Name " argument specifies a name that you can use in the
target attribute of your <a> tag. "Features " allows you to show/hide
various aspects of the window interface (more
info). "Replace " is a Boolean argument that
denotes whether the URL loaded into the new window should add to the
window's history list.window.open("http://www.dynamicdrive.com", "", "width=800px, height=600px, resizable") When defining the features (3rd parameter), separate each feature with a comma (,). Restriction: In IE, an exception is thrown if you try to open a window containing a page from another domain and then try to manipulate that window. For example: var mywin=window.open("http://www.notcurrentdomain.com", "",
"width=800px, height=600px, resizable") This restriction does not apply in other browsers. |
print() | Prints the contents of the window or frame. |
prompt(msg, [input]) | Displays a Prompt dialog box with a
message. Optional "input" argument allows you to specify the default
input (response) that gets entered into the dialog box. This
function returns the string the user has entered: var
yourname=window.prompt("please enter your name") |
requestAnimationFrame(func) - IE10+, FF11+, Chrome and Safari 6+ |
Executes any function passed into it on
the next available screen repaint by the browser. Unlike
setTimeout() that executes a function after a user defined
delay, requestAnimationFrame executes that
function automatically as soon as the browser reports it's ready for
the next screen repaint. The following creates a "universal"
requestAnimationFrame method based on the supported vendor
prefixed version of your browser:
window.requestAnimationFrame = window.requestAnimationFrame When
The callback function entered into var myblock = document.getElementById("square") Demo: Run Demo |
resizeBy(dx, dy) | Resizes a window by the specified amount in pixels. |
resizeTo(x y) | Resizes a window to the
specified pixel values. The following will resize the current window
to be maximized on the screen in browsers with no security hang ups
over such an operation (IE does and will do nothing): window.resizeTo(screen.availWidth, screen.availHeight) //see also the screen object |
scrollBy(dx, dy) | Scrolls a window by the specified amount in pixels. |
scrollTo(x, y) | Scrolls a window to the specified pixel values. |
setInterval(func, interval, [args]) | Calls the specified
function reference (func) or JavaScript statement(s) repeatedly per the "interval"
parameter, in milliseconds (ie: 1000=every 1 second). This method
returns a unique ID which can be passed into clearInterval(id)
to clear the timer. Use the optional
"args" to pass any number of arguments to the function.
The following are all valid examples of setInterval():setInterval(myfunction, 5000) //function reference var timer=setInterval("document.title='Current Second: ' + new Date().getSeconds()", 1000) //statements should be surrounded in quotes) If you need to repeated call a function that accepts parameters, put that function inside an anonymous function: setInterval(function(){myfunction(param)}, 5000) |
setTimeout("func", interval, [args]) | Calls the specified
function reference (func) or JavaScript statement(s) once after the "interval"
parameter has expired, in milliseconds (ie: 1000=after 1 second).
This method returns a unique ID which can be passed into
clearTimeout(id) to clear the timer. |
stop() | Stops the window from loading. NS4/NS6+ exclusive method. Use the optional "args" to pass any number of arguments to the function. |
Window Features in window.open()
The below lists the string features you can pass into the "feature" parameter of window.open() to manipulate its interface. Most features support a value of true or false, though in general, simply including the name of the feature implies it should be added to the window (yes), while not including it means it shouldn't (no). Separate each feature with a comma (,).
Feature | Description |
---|---|
channelmode | Specifies if window should be opened in channel mode. IE only. |
fullscreen | Specifies if window should be opened in full screen mode. IE only. |
height | Specifies the height of the window. |
left | Specifies the x coordinates of the window in pixels. IE only. See "screenX" as well. |
location | Specifies if the location bar of the window should be included. |
menubar | Specifies if the menu bar of the window should be included. |
resizable | Specifies if window should be resizable. |
screenX | Specifies the x coordinates of the window in pixels. NS only. See "left" as well. |
screenY | Specifies the x coordinates of the window in pixels. NS only. See "top" as well. |
scrollbars | Specifies if window should contain scrollbars. |
status | Specifies if the status bar of the window should be included. |
toolbar | Specifies if the toolbar of the window (ie: reload button) should be included. |
top | Specifies the y coordinates of the window in pixels. IE only. See "screenY" as well. |
width | Specifies the width of the window. |
- JavaScript Operators
- JavaScript Statements
- Global functions
- JavaScript Events
- Escape Sequences
- Reserved Words