JavaScript - Window Object

Now that we think you have good enough knowledge of programming fundamentals of JavaScript. So it is easier to demonstrate how to script objects in documents.


Top-Level Objects
As a refresher, we have to study the hierarchy of top-level objects.


Here we discuss on objects of this level that you’ll frequently encounter in your scripting:
 - Window
 - Location
 - Navigator
 - Document

The Window Object:
At the very top of the object hierarchy is the window object. This object gains the top position in the object food chain because it is the master container for all content you view in the Web browser.

As long as a browser window is open—even if no document is loaded in the window—the window object is defined in the current model in memory.

In addition to the content part of the window where documents go, a window’s sphere of influence includes the dimensions of the window and all of the “stuff” that surrounds the content area.

The area where scrollbars, toolbars, the status bar, and menu bar live is known as a window’s chrome. Not every browser has full scripted control over the chrome of the main browser window, but you can easily script the creation of additional windows sized the way you want and that have only the chrome elements you wish to display in the sub window.

The Window object is a convenient place for the document object model to attach methods that display modal dialog boxes and adjust the text that displays in the status bar at the bottom of the browser window.

 

A window object method enables you to create a separate window that appears on the screen.

Accessing window properties and methods
The most logical and common way to use property and methods of object Window:

window.propertyName
window.methodName([parameters])

Creating a Window:
A script does not create the main browser window. A user does that by virtue of launching the browser or by opening a URL or file from the browser’s menus (if the window is not already open). But a script can generate any number of sub windows once the main window is open.

The method that generates a new window is window.open().

This method contains up to three parameters that define window characteristics, such as the URL of the document to load, its name for target attribute reference purposes in HTML tags, and physical appearance (size and chrome contingent).

Consider the following statement that opens a new window to a specific size and with an HTML document from the same server directory that holds the current page:

window.open (“visions.html”,”vd”,”height=200,width=300”);

Something gets assigned to that variable sub Window. What is it? It turns out that when the window.open() method runs, it not only opens up that new window according to specifications set as parameters, but it also evaluates to a reference to that new window.

In programming practice, the method is said to return a value—in this case, a genuine object reference.

The value returned by the method is assigned to the variable.

Your script can now use that variable as a valid reference to the second window. If you need to access one of its properties or methods, you must use that reference as part of the complete reference.

For example, to close the sub window from a script in the main window, use this reference to the close() method for that sub window:

             subWindow.close();

Example

<html>
<head>
<title    >Window Opener and Closer</title>
<script type=”text/javascript”>
var newWindow
function makeNewWindow()
{
newWindow = window.open(“”,””,”height=300,width=300”);
}
function closeNewWindow()
{
if (newWindow)
{
newWindow.close();
newWindow = null;
}
}
</script>
</head>
<body>
<form>
<input type=”button” value=”Create New Window” onclick=”makeNewWindow()”>
<input type=”button” value=”Close New Window” onclick=”closeNewWindow()”>
</form>
</body>
</html>