Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Handling Windows and Frames Across Browsers
Pages: 1, 2

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:



+----------------- top (parent)----------------------+

+---------------------+-------------------------------+
|     frames[0]       |         frames[1]             |
|       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[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>

You can view an example here (or you can download a Zip archive of these files).

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.

<script language="JavaScript">
<!--
function checkForm()
{
  var check = this.document.form_name;
  if (isWhitespace(check.field_name.value)) {
      alert("Please enter the required text.");
      check.field_name.focus();
      return false;
  }
  // if the code got up to here, we can submit the form
  check.submit();
}
//-->
</script>

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:

Related Reading

JavaScript: The Definitive Guide, 4th EditionJavaScript: The Definitive Guide, 4th Edition
By David Flanagan
Table of Contents
Index
Sample Chapter
Full Description

<input type="button" name="button1" value="Submit Form" onClick="javascript:checkForm();">

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.


Return to the JavaScript and CSS DevCenter.