Wednesday, April 20, 2005

Using JavaScript Window.Open() & Close() functions in Ur Dotnet Apps

window.Open Function
----------------------------------

The window.open() function allows us to control the way a new window is opened, you can choose to have the toolbar, the address bar or even have a fixed dialog window which cannot be resized.

All these are controlled based on the parameters passed to the open method, lets look at each one of them.

*************************************************************
The "LINKS" or "EXTRAS" toolbar.
window.open("page1.htm","width=400,height=300,directories=yes");

The address or URL toolbar.
window.open("page1.htm","width=400,height=300,location=yes");

The toolbar with FILE, EDIT, VIEW, etc....
window.open("page1.htm","width=400,height=300,menubar=yes");

Allows the visitor to be able to resize the new window or not.
window.open("page1.htm","width=400,height=300,resizable=yes");

Forces vertical scrollbars to appear or not. Rarely used property.
window.open("page1.htm","width=400,height=300,scrollbars=yes");

The status bar along the bottom of the browser window.
window.open("page1.htm","width=400,height=300,status=yes");

The toolbar with BACK, FORWARD, REFRESH, etc...
window.open("page1.htm","width=400,height=300,toolbar=yes");

The height n width of the new window in pixels.
window.open("page1.htm","width=400,height=300");
*************************************************************

All the above parameters can be clubbed together to get a window of our choice.
Specifying only the WIDTH and HEIGHT options will automatically set the other properties to "no". Only the title bar holding the minimize/maximize buttons will be displayed on the window. To get the other settings to show, they will have to be specfied as "yes" explicitly.

window.close Function
----------------------------------

To close the current window just say
window.close()

But how do i close the child window by clicking a button on the parent window.
Provide a name for the child window when you open it
Ex: window.open("URL","Name","parameters");
window.open("page1.aspx","MyExamle","parameters");

Now you have to call the close method on the window name like this
Ex: MyExample.close();

Now by using the Name property you can use all the object available for the window object and manipulate the child window.

The example below changes the Url of the child window to show a new url.
Ex: MyExample.location.href("Webform2.aspx")

Hope this section provided you with some basic information on using the Open and close methods of the window object in Javascript and how to manipulate child window views.

No comments: