Handling subwindows and frames

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:

You can refer to it from another frame such as parent.index_frm, or code>top.frames[1], 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:

<script language="JavaScript">
<!--
// Small function to load an URL in the top level
// window, on the selected frame
// Note: this function runs from the Subwindow
// generated on the other frame of the top level
// window (named 'menu_frm' in this example)
function loadParentFrame(url)
{
window.opener.parent.frames[1].location.href = url;
// an alternative to the same statement above
window.opener.parent.index_from.location.href = url;
}
//-->
</script>

Common compatibility issues

Some of the most common problems I experienced while developing applications that make use of JavaScript were compatibility issues with using JavaScript functions to validate forms in a "wizard" type utility. Users would go from step 1 to step 8 by filling up forms and on each step a custom function would check the values for any problems, and if everything was correct, submit the form to the next step.

This entailed using buttons on the HTML forms and calling the JavaScript functions to validate the form. If the form contents were not valid, the script would show an error message and ask the user to fix the problematic field.

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.

Most of the time, advanced JavaScript functions are custom-made, so it's a good idea have several copies of Netscape and IE to test your scripts. Nothing is more important than unit-testing your scripts in a systematic way. It is not easy or fun, but you will surely have reliable code.

I hope this article could help on some of the issues relating to JavaScript handling to multiple windows and frames and also some form validation tips.

Cheers!

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.