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:

<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.

Comments on this article

Showing messages 1 through 2 of 2.

• How to pass a some values from the originating window to the new window?
  2002-01-07 19:30:23  bonjovi [View]
  
  
  My new window as well as my originating window are ASP files. Now i open the new window and i want to pass a value to it. How can i do this?
  I tried a workaround, that is in the originating window i did a document.write on the new window and created a hidden tag to pass the value. But i was not able to do that.
  Please guide with a suggestion.
  
  Thanks,
  Vikram

• pop-up buster
  2001-08-30 00:51:32  slevy1 [View]
  
  
  I have a site that is enclosed in frames. Someone tried to link to my site by having it load into a new window when the link was clicked. So, I decided to see what I could do to prevent my site from being a popup. Here's what I did:
  
  <script language="Javascript">
  // works with ie5.5 on a PC with Windows 95
  // but doesn't work with Netscape 4
  
  // works even if opener is undefined
  
  if (top.opener){
  top.opener.location.href = "http://www.preservestaffnow.org";
  parent.window.close();
  }
  </script>