This example extends the web page redirection script to support frames. Frames allow you to display separate hypertext documents simultaniously. For information about frames, please read Netscape's Frames Documentation. As shown in this example, the document in the frame to the right contains a drop-down list box of web pages that the user may select from. When the user makes a selection, it updates the frame to the left with the new web page while the frame to the right does not change. This technique allows you to provide consistent user navigation tools throughout your web site.

Below is the modified JavaScript function enhanced to support frames. The function now accepts two parameters unlike the original version which only required one. The first parameter never changes and is always the word "this"; the second parameter is the name of the frame to display the selected web page in. The function still supports non-framed web pages by specifying an empty string as the target frame name.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function switchpage(select, target) {
// JavaScript function for switching to web page when user 
// selects option from the given list box.
// Copyright Kelly Yancey, 1997-1999.
  var index;	// variable to scan OPTIONs or FRAMEs
  var dest;	// frame or window destination

  if(target=="") dest=window;
  else if(target=="_top") dest=parent;
  else {
    for(index=0; index<parent.frames.length; index++)
      if(parent.frames[index].name==target) {
        dest=parent.frames[index];
        break;
      }
    if(index==parent.frames.length) {
      alert("switchpage: no frame named "+target);
      return(false);
    }
  }

  for(index=0; index<select.options.length; index++)
    if(select.options[index].selected) {
      if(select.options[index].value!="")
	dest.location.href=select.options[index].value;
      break;
    }
  return(true);
} 

// -->
</SCRIPT>

Then, to create the drop-down list box on your page which takes advantage of the JavaScript enhancement, include this HTML code in the body of your web page. You will need to replace the two occurences of FRAME with the name of the target frame to display the page in. Be sure to keep the quotes shown around the frame name intact.

<FORM ACTION="http://www.posi.net/cgi-bin/redirect"
      TARGET="FRAME">
<SELECT NAME="url" onchange="switchpage(this, 'FRAME')">
  <OPTION VALUE=""> Web Page Redirection Tutorial
  <OPTION VALUE="http://www.yahoo.com"> Yahoo!
  <OPTION VALUE="http://www.lycos.com"> Lycos
</SELECT>
<INPUT TYPE="submit" VALUE=" Go ">
</FORM>

The JavaScript function has been extensively tested with all JavaScript-capable browsers. Furthermore, The CGI redirection program provides a fallback with similar functionality for browsers that either do not support JavaScript or the user has disabled JavaScript support. Together, you get all the user interface benefits of the original script, plus complete integratation with web sites incorporating frames.

Return to Web Page Redirection Tutorial