JavaScript Window Object

The Window object is used to open a window in a browser to display the Web page.

The following figure shows the Window object in the hierarchy of Browsers objects.

The window object has the following three features in JavaScript:

collection
properties
methods

JavaScript Window Object Collection

The window object collection is a set of all the window objects available in an HTML document.

JavaScript Window Object Properties

All data and information about any browser is attached to the window object as properties and the frames property in the window object returns all the frames in the current window. The table given below describes properties of the window object in JavaScript.

Property	Description
closed	returns a boolean value that specifies whether a window has been closed or not
defaultStatus	specifies the default message that has to be appeared in the statusbar of a window
document	specifies a document object in the window
frames	specifies an array of all the frames in the current window
history	specifies a history object for the window
innerHeight	specifies the inner height of a window's content area
innerWidth	specifies the inner width of a window's content area
length	specifies the number of frames contained in a window
location	specifies a location object for the window
name	specifies the name of a window
outerHeight	specifies the height of the outside boundary of a window in pixels
outerWidth	specifies the width of the outside boundary of a window in pixels
parent	returns the parent frame or window of the current window
screenLeft	specifies the x coordinate of the window relative to a user's monitor screen
screenTop	specifies the y coordinate of the window relative to a user's monitor screen
screenX	specifies the x coordinate of the window relative to a user's monitor screen
screenY	specifies the y coordinate of the window relative to a user's monitor screen
self	returns the reference of the current active frame or window
status	specifies the message that is displayed in the status bar of a window, when an activity is performed on the window
top	specifies the reference of the topmost browser window

JavaScript Window Object Properties Example

Here is an example demonstrates window object properties in JavaScript:

<!DOCTYPE HTML>
<html>
<head>
   <title>JavaScript Window Object Properties</title>
</head>
<body>

<h3>JavaScript Window Object Properties Example</h3>
<iframe src="http://codescracker.com/java"></iframe>
<iframe src="http://codescracker.com/c"></iframe>
<iframe src="http://codescracker.com/cpp"></iframe>
<script type="text/javascript">
   for(var i=0; i<frames.length; i++)
   {
      frames[i].location = http://codescracker.com"
   }   
</script>

</body>
</html>

Here is the sample output produced by the above JavaScript Window Object Properties example code:

JavaScript Window Object Methods

The methods of the window object enable you to perform various tasks such as open a url in a new window or to close a window. The following table describes the methods of the Window object in JavaScript.

Method	Description
alert()	displays an alert box with a message and an OK button
blur()	removes the focus from the current window
clearInterval()	clears the timer, which is set by using the setInterval() method
clearTimeout()	clears the timer, which is set by using the setTimeout() method
close()	closes the current window
confirm()	displays a dialog box with a message and two buttons, OK and Cancel
createPopup()	creates a pop-up window
focus()	sets focus on the current window
moveBy()	moves a window relative to its current position
moveTo()	moves a window to an specified position
open()	opens a new browser window
print()	sends a print command to print the content of the current window
prompt()	prompts for input
resizeBy()	resizes a window with the specified pixels
resizeTo()	resizes a window with the specified width and height
scrollBy()	scrolls the content of a window by the specified number of pixels
scrollTo()	scrolls the content of a window up to the specified coordinates
setInterval()	evaluates an expression at specified time intervals in milliseconds
setTimeout()	evaluates an expression after a specified number of milliseconds

JavaScript Window Object Methods Example

Here is an example uses some window object methods in JavaScript:

<!DOCTYPE HTML>
<html>
<head>
   <title>JavaScript Window Object Methods</title>
   <script type="text/javascript">
      var mywin;
      function openMidWin(url)
      {
         var wid = 500;
         var hei = 200;
         var winFeat = "width = " + wid + ", height = " + hei + " , status, resizable";
         myWin = window.open(url, "subWind", winFeat);
      }
      function disp_alert()
      {
         alert("Hi, This is an alert box.");
      }
      function resize_win()
      {
         window.resizeBy(-100, -100)
      }
      function close_win()
      {
         if(window.confirm("Do you really want to close the browser ?"))
            window.close();
      }
   </script>
</head>
<body>

<h3>JavaScript Window Object Methods Example</h3>
<input type="button" value="Open New Window" onclick="openMidWin('WindowObjectMethod.htm')" />
<input type="button" value="Alert" onclick="disp_alert()" />
<input type="button" value="Resize Window" onclick="resize_win()" />
<input type="button" value="Close Window" onclick="close_win()" />

</body>
</html>

Here are some sample output produced by the above Window Object Methods in JavaScript example code. This is initial output:

javascript window object properties methods

This is the output, after clicking on Open New Window button:

This is the output, after clicking on Alert button:

This is the output produced after clicking on Resize Window button:

This is the output produced after clicking on Close Window button:

Now, click on the OK button to successfully close the window.

JavaScript Online Test

« Previous Tutorial Next Tutorial »