This article aims to show the properties and methods of the
window object while giving practical advice on how to implement applications that make use of that functionality. A simple example of the creation of a window would be useful:
var win_URL = "index.html";
var win_Name = "_New";
var win_Features = "width=400,height=200,top=30,left=30,resizable=no, scrollbars=yes,toolbar=no,location=no,menubar=no,status=no";
// open the window with the variables defined above
var test_Win = window.open(win_URL, win_Name, win_Features);
That code will open a 400 x 200 pixel window with the URL specified. The variable
win_Name is the actual name of the window, so it can be used as a target for HTML forms, for example. This is quite useful for completely dynamic forms that need a "preview" window. In this case, you would need to change the target of the form dynamically to post the information to a different window. More on this later on the article though.
The textbook definition of the
open() method of the
window object is as follows:
open(URL, windowName[, windowFeatures])
This method returns a
window object, so if you ever need to communicate with this newly created subwindow, or will need to reference this window later in your code, it is best to save the returned value in a variable. You probably noticed that the
windowFeatures parameter is optional, and is used to set the actual features of the subwindow, like setting the height and width.
One of the reasons to use subwindows on web sites is to create special features and sections of a web sites, with sections that are not as crucial linked to through subwindows. One of the best examples I can think of is the "Vote" subsection/application of CNN.com.
They have a large front page with links to all the important headlines and stories that generate traffic for them. They obviously want to keep their users on the front page with those stories right under their noses, so they designed the Vote application to create a new subwindow and post the form to this window.
The same content might be a good idea for a login form, so a subwindow could be used to show error messages or special sections for correctly logged in users.
The parent window might be referenced by the
opener object. Some examples are shown below:
window.opener.location.href = url;
window.opener.location.href = window.opener.location;
Handling frames is somewhat different than handling a single document window because you need to specify which frame you want to use. Just like on forms, you can name the frames and reference them by that name instead of by the number. On a simple document split in two vertical frames, referencing these frames would be something like this:
+----------------- top (parent)----------------------+ +---------------------+-------------------------------+ | frames | frames | | or | or | | parent.menu_frm | parent.index_frm | | | | +---------------------+-------------------------------+ <frameset cols="150,*"> <frame name="menu_frm" src="menu.html"> <frame name="index_frm" src="index.html"> </frameset>
You can refer to it from another frame such as
parent.index_frm, or code>top.frames, if that frame is the second one in the stack.
All of this seems very easy, but try to reference a specific frame from a subwindow created on the left frame of the document above. From this subwindow, you want to open a different page on then
index_frm frame of the top-level window. Here's how to do this:
You can view an example here (or you can download a Zip archive of these files).
So the form validation code is something like that, but the real implementation is up to you. You would need an HTML button like this for the code to work:
This is the only piece of code that works flawlessly under all versions of Microsoft Internet Explorer, Netscape Navigator, and Mozilla. I tried making the form validation triggered by a
onSubmit event, but Netscape was submitting the form even if you tried to
return false; to it.
Joao Prado Maia is a web developer living in Houston with more than four years of experience developing web-based applications and loves learning new technologies and programming languages.
Copyright © 2009 O'Reilly Media, Inc.