Java Reference
In-Depth Information
<p>
It includes a guide to the language - when where and how to get
the most out of JavaScript - together with practical case studies
demonstrating JavaScript in action. Coverage is bang up-to-date,
with discussion of compatability issues and version differences,
and the topic concludes with a comprehensive reference section.
</p>
</body>
</html>
Save the fi nal page as
pro_js_details.htm
.
Load ch08_examp4.htm into your browser and click either of the two images. A new window contain-
ing the topic's details should appear above the existing browser window. Click the other book image,
and the window will be replaced by one containing the details of that book.
The fi les
pro_ajax_details.htm
and
pro_js_details.htm
are both plain HTML fi les, so you won't
look at them. However, in
ch08_examp4.htm
you fi nd some scripting action, which you
will
look at here.
In the script block at the top of the page, you fi rst defi ne the variable detailsWindow.
var detailsWindow;
You then have the function that actually opens the new windows.
function showDetails(bookURL)
{
detailsWindow = window.open(bookURL,”bookDetails”,”width=400,height=350”);
detailsWindow.focus();
}
This function is connected to the onclick event handlers of book images that appear later in the page.
The parameter bookURL is passed by the code in the onclick event handler and will be either pro_
ajax_details.htm or pro_js_details.htm.
You create the new window with the
window.open()
method. You pass the
bookURL
parameter as the
URL to be opened. You pass
bookDetails
as the name you want applied to the new window. If the
window already exists, another new window won't be opened, and the existing one will be navigated
to the URL that you pass. This only occurs because you are using the same name (
bookDetails
) when
opening the window for each book. If you had used a different name, a new window would be opened.
By storing the reference to the window object just created in the variable detailsWindow, you can access
its methods and properties. On the next line, you'll see that you use the window object, referenced by
detailsWindow, to set the focus to the new window — otherwise it will appear behind the existing
window if you click the same image in the main window more than once.
Although you are using the same function for each of the image's
onclick
event handlers, you pass a
different parameter for each, namely the URL of the details page for the topic in question.
<h4>Professional Ajax</h4>
<p>
<img src=”pro_ajax.jpg” alt=”Professional Ajax, 2nd Edition” border=”0”
onclick=”showDetails('pro_ajax_details.htm')” />
