December 1, 1997

DR. WEBSITE: Using JavaScript To Choose A Web Page From a Dropdown List and Exit a Frame

By David Fiedler and Scott Clark

Dear Dr. Website: I want to use the dropdown list described on the WebDeveloper.com Questions and Answers page (www.webdeveloper.com/library/qanda.html#dropdown), but I am using it within a frame, and I want it to exit the frames. How can I get the equivalent of TARGET="_top" to work in this script?

For those who haven't seen the example our reader is referring to, it is a JavaScript that enables a visitor to choose a Web page from a dropdown list. When the user clicks on a title in the dropdown list, the browser automatically loads the Web page he or she has clicked on. Here is the "before" code:

<SCRIPT LANGUAGE="JavaScript">
<!--
function doArray() {
var arylnth = doArray.arguments.length;
for ( i = 0 ; i < arylnth ; i++ ) { this[i]=doArray.arguments[i] } }

function newpage() {
var choose = eval(document.dropdown.site.selectedIndex); if( (choose > 0) && (choose < 
12) ) {
var section=new doArray( '',
'http://www.webdeveloper.com/index.html', 'http://www.webdeveloper.com/library/',
'http://www.webdeveloper.com/library/
reference.html', 'http://www.internetnews.com/wd-news/',
'http://www.webdeveloper.com/reviews/',
'http://www.webdeveloper.com/devforum/'); 
location=section[document.dropdown.site.selectedIndex]; 
}
}
//-->
</SCRIPT>

Here is the HTML source for the dropdown:

<FORM NAME="dropdown">
<SELECT NAME="site" onChange='newpage();' ALIGN="left"> <OPTION 
SELECTED>Select a Web Developer® Section <OPTION>Main page
<OPTION>DoIt Library
<OPTION>Reference
<OPTION>Web Developer® News
<OPTION>Reviews
<OPTION>Developer's Forum
</SELECT>
</FORM>
To load the new page within the entire browser window, you would replace location with 
top.location, i.e.:
top.location=section[document.dropdown.site.selectedIndex]; 

or if you wanted to load the new page into a different frame entirely, you would refer to that frame by its name--i.e., top.framename.location.

Webdeveloper.com's Home Page

---

RELATED STORIES:

Keywords: html, java
Date: 19971201