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:
The window object collection is a set of all the window objects available in an HTML document.
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 |
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:
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 |
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:
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.