Home » Tutorials » JavaScript » Window Object

Window Object

The JavaScript window object has quite a few properties and methods, but beware because many of them are not supported in all major browsers. However, the information you can obtain using the window object can be extremely important depending on what you want to do. For example, maybe for some reason you want to know the size of the user’s window. Using the window object is the primary way you would get this information.

The JavaScript window object isn’t used very often, but it is quite powerful. For example, one of the window object’s methods is a print(). So, you could create a button on the page that would trigger an event that called the window.print() rather than the user having to search in the browser for the hidden print option. One cool distinction about the window that you may notice is that you can directly type something like alert() and not window.alert() and JavaScript will completely know what you are talking about. That is because window is the primary object of a browser, which means you don’t need to declare it before the method unlike the other objects.

Common Window Object Properties

innerHeight – gets or sets the inner height of the actual content area

Example
document.write(window.innerHeight);
Result
473

innerWidth – gets or sets the inner width of the actual content area

Example
document.write(window.innerWidth);
Result
662

navigator – we discuss this in the Navigator Object tutorial

outerHeight – gets or sets the outer height of a window (This includes tabs, toolbars, and scrollbars)

Example
document.write(window.outerHeight);
Result
728

outerWidth – gets or sets the outer width of a window (This includes tabs, toolbars, and scrollbars)

Example
document.write(window.outerWidth);
Result
680

Common Window Object Methods

alert() – shows an annoying alert box

print() – prints the window’s contents (Many users don’t know how to print a web page. Make it easy for them.)

Example
function exampleFunction3()
{ 
    window.print();
}
<input name="" type="button" onclick="exampleFunction3()" value="I Print"/>
Result

scrollTo() – scrolls to specified x and y coordinates

Example
function exampleFunction4()
{
     window.scroll(0,30)
}
</script>
<input name="" type="button" onclick="exampleFunction4()" value="I Scroll"/>
Result

Timers

Timers are a method of the window object. They can be very tricky, but often very useful when dealing with a variety of issues. While a good amount of timers are used correctly, JQuery’s animate can often do your job much more efficiently. Please be sure to check out a few of JQuery’s functions before using timers.

Example
var timeoutTimer=setTimeout("alert('10 seconds!')",30000);// This fires once
var intervalTimer=self.setInterval("intervalTimerFunction()",10000); // This fires every 10 seconds
function intervalTimerFunction() // intervalTimer calls this function
{
    alert('intervalTimer timer happened');
}
<input name="" type="button" onclick="clearTimeout(timeoutTimer)" value="Stop timeoutTimer"/>
<input name="" type="button" onclick="clearInterval(intervalTimer)" value="Stop intervalTimer"/>


Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Window Object". After Hours Programming. Accessed on March 17, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/window-object/.

  • Stewart, Suzy. "Window Object". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/window-object/. Accessed 17 March, 2024.

  • Stewart, Suzy. Window Object. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/window-object/.



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.