<!-- JavaScript

Handling and Controlling Windows

Introduction

Window handling and controlling are crucial as well as interesting aspects in JavaScript. Manipulating browser windows and doing various things with them play a major part in providing efficient User Interaction of your website/script for the user.

The Window object in JavaScript is another powerful object and can perform a large range of functions on browser windows. Standardization is although a hindrance for the Window objects in JS. The reason for this non-uniform implementation of the browser functions is due to the large number of companies making them. Microsoft, Mozilla, Netscape, Opera to name a few. Therefore some functions may be restricted for one browser but may be allowed for others due to security aspect.

Changing the window chrome of the active window or an already opened one, closing the main window using the window object of the sub-window, closing other windows that aren't handled by the current window object are just some of the things that cannot be performed due to security reasons.

The instance of a Window object need not be created explicitly. The instance of Window object is created automatically with the occurrence of the BODY or FRAME tag.

Operations

Let's start with a simple function of changing the window size of the current page:


The above code will change the window size to 640x480 pixels. You can also modify the browser size by a particular amount of pixels by using the following function.


These are pretty easy to use and can be used within the various window events. We shall discuss about the Window object Events later.

Now, we shall see about how to move the window using the window object. There are two methods which will move the window position. One is the moveTo( ) method and the other one is moveBy( ).


This will move the window to the specified co-ordinates, i.e., to (40, 50). The coordinates are calculated from the top-left corner of the screen.

To move the window by some pixels we use the following code:


To open a new window in JavaScript we use the open( ) function of the window object.
The URL is ofcourse the page you would like to get displayed on the new window. The name is what you would like to name the window, features are the various characteristics that you can force upon the browser window. Replace is another feature wherein you have a option about storing the page into the browser history. This 'Replace' variable will have Boolean values, therefore TRUE means that the new window url will replace the current page in history. FALSE indicates that a new entry will be created in the history list for the new page.

The characteristics that the browser window can have are height, displaying or hiding various toolbars, placing of the window, width and more. Let's have a look at few of the features of the open( ) method.


The above statement will open a new window which will display the specified page pointed by the URL of size 600 by 400 pixels having a titlebar but no status bar. This window cannot be sized as it has a 'no' value assigned to it.

Opening of a new window is also similar to displaying pop-ups. We can create pop-ups using the window.createPopup() statement.

Pop-ups can be created and customized using the windows object by making correct use of JavaScript functions and event handlers.

We can add this code to out HTML part:


The Popup( ) is a user defined function, which we will have to code it ourselves if we want to customize the popup window.

We will declare and define a function named Popup( ). In the example to follow we will make use of the Document object to stylize and format the new popup window. The Document object as you know can handle every element present on a page.


Now using the bwin variable you can access and change every aspect of the data that will be displayed in the window.

We can now have a look on how the main window and sub-window functions work. Whenever a new window is opened using the window.open( ) function a property called opener is assigned to the created window. On the other hand if you open a window yourself without any interaction with a page on the browser the opener property is set to NULL.

Therefore if you want to test whether the window is opened through a link or my the user himself, then we can use the following code:


Therefore we see that the opener property is something like a pointer which points to the main window that created the sub-window.


The above code will copy the value in the name field of the form in the sub-window to the name field in the main window.

Window object Events

Events is what alerts the Script that the user has interacted with the browser window. The above window functions or any JavaScript code can be run only with the help of the Window events.


This is the syntax for using the Window events. There are events such as onLoad which helps run a piece of code when the document loads. Normally the onLoad event is used alongwith the BODY tag:


Other functions like onError( ), onBlur( ), onUnload( ) , onResize( ) and onFocus( ) are used in the same manner.