Under the Hood: Details of the Popup Script
In this page we'll look at the technical details of the popup scripts. If you just want to quickly implement popups you probably will do better starting with
Popup Windows: The Basics.
The Script
Let's first look at the script function that opens the popup. This function can be called from a variety of objects such as a
link,
an
image map, or
the
<BODY ...> element for opening the popup
automatically.
Line 1 opens the script element, and
line 2 opens a comment (as you should always do in scripts).
Line 3 begins the popup() function, taking two arguments. The first argument,
mylink, is the object (the link or image map) calling the function, or it can be a string representing the URL for the popup.
The second argument,
windowname,
is a unique name for the popup window. Every popup window must have a unique name. More than one link can target the same popup by using the same unique popup name.
4 has the opening bracket for the function.
5 tests for the existence of the window.focus method. window.focus is how we bring the popup to the front every time, even though it was already open. Some older browsers do not have window.focus -- those browsers degrade gracefully by failing out of the function and going to the popup's URL in the current window. Note that there are no parentheses after window.focus because we are testing for the existence of the function, not running it.
Line 6 declares the
href variable, which holds the URL to which the popup should navigate. Lines 7 to
10 figure out what that URL is. In 7 we test if
mylink is a string. If it is a string, in line 8 we assign to
href the value of the string. If
mylink
is not a string then we assume it is an
<A ...> or
<AREA ...> object and in line 10 assign to
href the value of the objects
href property (which was set in the
HREF attribute of the
<A ...> or <AREA ...> tag).
11 is the real kernel of the whole function -- this is where the popup is actually opened. window.open() takes three arguments. The first is the URL to open in the popup. In our script we use the
mylink variable. The second is a unique name of the popup -- we use the
windowname variable. The third argument is a string containing a comma separated list of properties of the window. These properties are explained in more detail starting at
Popup Windows: open() Parameters.
In line 12 we return false to cancel the click on the link. If we don't return false the link will navigate the current window to the URL of the popup.
Finally, line 13 closes the popup() function,
14 closes the comment, and
15 closes the script.
The Link
Now let's take a look at the link that opens the popup.
<A
HREF="popupbasic.html"
onClick="return popup(this, 'notes')">my popup</A>
Like regular link, the <A ...> tag has an
HREF attribute that has a URL. In addition, our popup link has an
onClick attribute. When the user clicks on the link the code in onClick is triggered.
The code begins with return. One of the properties of
onClick is that if the code returns false the click event is cancelled. Remember how the script returns false at the end? That's where the false value comes into play. When the user clicks on the link, the code cancels the click and opens the popup its own way.
After return, the code calls the popup() function with two arguments. The first argument,
this, indicates the link object itself. The script uses this object reference to get a URL for the popup. By passing an object reference instead of typing the URL twice we avoid the problems inherent with redundant information. If you change the URL or copy and paste the code for a different link, you only need to change the URL in one place. Note that
this should not be in quotes.
The second argument is a unique name for the popup. Every popup window must have its own unique name. Different links can target the same popup by all using the same name. Note that the name should be in single quotes
('').
The Events
Let's walk through the events that go into opening a popup. When the user clicks on a link, the browser triggers the
onClick event, running the code in the
onClick attribute. Because the first word is
return, the browser watches to see if a true or false value is returned. The command after
return calls the
popup() function, passing a reference to the link object and a string containing the unique name of the popup.
The script first checks if the browser understands the window.focus method
(line 5).
If the browser doesn't have
window.focus (which will happen in some older browsers)
then the script returns true, which is in turn returned from the
onClick event handler. Because
onClick returns true the process of connecting to the URL continues as normal in the current window.
Most browsers will have window.focus, so the script continues. Starting in line 7 the script checks if the first argument
(mylink) is a string or an object reference. This test gives the function flexibility by allowing us to call it from a link object or from the
onLoad event of the
<BODY ...> element. Either way the script gets a URL to point the popup to.
Next, the script actually opens the popup using the URL and the unique name. Finally, the script returns false. Back in the link, the false value cancels the click event -- which is no longer needed because the popup has been opened.
