382 Chapter 22 – Introduction to JavaScriptSample Scripts
Web Design in a Nutshell, eMatter Edition<SCRIPT LANGUAGE="JavaScript">
<!—-
function openWin(URL) {
aWindow=window.open(URL,"thewindow","toolbar=no,width=350,
height=400,status=no,scrollbars=yes,resize=no,menubar=no");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P><A HREF="javascript:openWin('mozart.html');">Mozart</A></P>
<P><A HREF="javascript:openWin('wagner.html');">Wagner</A></P>
<P><A HREF="javascript:openWin('beethoven.html');">Beethoven</A>
</P>
</BODY>
</HTML>
The code in bold indicates the parts you should alter for your site. Give the new
window a name, if you wish, by replacing the text “thewindow.” Specify the
settings for the window by changing the values of toolbar, status, scrollbars, resize,
and menubar fromnotoyes(or vice versa). Set the width and height appropri-
ately. Remember not to put any spaces or linebreaks in this code.
Note that you can hardwire the function by replacing the text “URL” with a specific
URL, such asmozart.html.If you do this, you simply call the function without
passing the URL to the function, as follows:
<A HREF="javascript:openWin();">Mozart</A></P>Managing Frames
Another popular job for JavaScript is loading content into frames, particularly
loading several different frames with one click. Here is the code for a function that
changes the contents of both a toolbar frame and a main frame with a single click.
This code assumes that the toolbar frame has been namedtoolbarand the main
frame has been namedmain.
function changePages (toolbarURL, mainURL) {
parent.toolbar.location.href=toolbarURL;
parent.main.location.href=mainURL;
}
The actual anchor tag looks like this:
<A HREF="javascript:changePages('toolbar_document2.html',
'main_document2.html');"Change Pages</A>
If you use the frame namestoolbarandmainyou can use this code as is—just
change the URLs you pass to the function. If you change the frame names to say
left andright, your function would look like this:
function changePages (leftURL, rightURL) {
parent.left.location.href=leftURL;
parent.right.location.href=rightURL;
}