Ken Ward's Java Script Tutorial ...

How to Use Hyperlinks in New Windows!

Click on the following button and see what happens!

In my browser, I get a menu. This is called a control in computer-speak, because the open window can open other sites while staying in existence itself. Drag the control menu over to where you want it, and resize this window so you can view both. And click on some links. The links appear in this window. There is also a close button. Click the close button and the window closes, as expected. This page is then reloaded. I think this is a very neat and useful technique!

Here is the code for the button:

<form action="">

<input type="button" value="Menu" onclick="Menu('WindowNewEx1.htm');" id="b1" name="b1" />

</form>

Nothing new here. When we click the button we call the function Menu, which loads the window WindowNewEx1.htm.

Let's look at the code for the function Menu:

<script type="text/javascript">

function Menu(url) {

window.open(url, "menu", "height=400,width= 200,"+

"directories=no,location=no,menubar=no," +

"resizable,status=no,toolbar=no,history=no,scrollbars");

return false;

}

</script>

Again, there are no secrets here. The function Menu is similar to the others we have looked at to open windows. It uses window dot open to open a file, which as we know is called WindowNewEx1.htm. The secret must be in this window! Let's look at its code:

<head>

<script type="text/javascript">

function openPage(PageToLoad)

{

opener.document.location = PageToLoad;

}

</script>

</head>

<body onunload="opener.document.location='WindowNewHyperlinks.htm'">

<ol>

<li>

<a href="javascript:openPage('alerts.htm')">

Message Boxes

</a>

...

</ol>

</body>

</html>

The above code contains the working bits of the Java Script with bits of HTML to show where the code is placed. In the HEAD there is a function called openPage:

function openPage(PageToLoad)

{

opener.document.location = PageToLoad;

}

This function has one simple line of code. We know that location is an object that stores the current page details, and here we make it into a variable called PageToLoad. The new part is opener which refers to the window that does the opening! In this case, this window.

In the hyperlinks we use our function:

<a href="javascript:openPage('alerts.htm')">

We tell the Browser that the code is java script. Then we call the Java Script function openPage.This function then puts, in this case, the file alerts.htm in the 'opener' location, so the page we want to view is loaded in our original file. The other links are exactly the same except they load different files.

How does our page reappear when we close the control window?

This is done in the code in the onUnload event in the body tags.

<body onunload="opener.document.location='WindowNewHyperlinks.htm'">

The file WindowNewHyperlinks.htm is this file! When we click various hyperlinks in the control, other files are loaded in this window. When we close the control window the onUnload event makes this window again load the file you are now reading. So we do not have to search through the history to find this file again because it is not so magically reloaded!

 Let's look at drop-down menus now.

[an error occurred while processing this directive]