U
nlike the document.URLproperty, which is static, the window.location property allows you to actually reset the location associated with a window and effectively redirect users to a new URL.For instance, consider the following simple page:
<head>
<p>You are here now</p>
</body>
In this case, the text “You are here now” will not even display in the browser;
as soon as the page loads, the user will immediately be directed to the Yahoo!
Web site.
The following script leverages the window.locationproperty to allow users to enter the location they would like to visit in a form field and then takes them there when they click on the Go button:
1. Start a form with the formtag. This form will never be submitted anywhere, so it doesn’t actually need methodor actionattributes:
<form>
2. Create a text box named url:
Enter a URL: <input type=”text” name=”url”>
3. Create a button with the label “Go”. This form control should be of type buttonand not type submit, since the button is not being used to submit the form anywhere:
<input type=”button” value=”Go”>
4. Add an onClickattribute to the button’s tag. The value of this attribute is HTML code to assign the value stored in the urltext field to the window.locationproperty:
<input type=”button” value=”Go” onClick=”window.location Æ
= this.form.url.value”>
5. Close the form with a closing form tag so that the complete form looks like the following:
<form>
Enter a URL: <input type=”text” name=”url”>
notes
•
The windowobject pro-vides properties and meth-ods for manipulating the current window. One of the properties is the locationproperty, which contains the URL of the document displayed in the current window.•
The takes as its valueonClickattribute JavaScript code to execute when the user clicks on the button.Task 55
tip •
In an event handler used for a form such as onClick, you can refer to the current form as this.form. That means this.form.urlrefers to the text field named url, and this.form.url.valuerefers to the text entered in the urltext field.
onClick=”window.location = this.form.url.value”>
</form>
6. Store the form in an HTML file, and open that file in a Web browser. You will see a form.
7. Enter a URL in the form’s text field, as illustrated in Figure 55-1.
Figure 55-1:Entering a URL in the form.
8. Click on the Go button, and you will be redirected to the URL you entered, as shown in Figure 55-2.
Figure 55-2:Redirecting to the new URL.
Task 55
cross-reference
•
This task accesses data in forms and uses event han-dlers. Part 4 of the book addresses working with forms, while Part 9 dis-cusses event handlers.Creating a “Page Loading ...”
Placeholder
T
his task looks at how to create a “page loading” placeholder that pops up in a separate window while the main document is loading. When the main docu-ment finishes loading, the placeholder window will close.This task uses two methods of the windowobject plus one event handler:
• window.open: Opens a new window and loads a document in that window
• window.close: Closes a window
• onLoad: Used in the bodytag to trigger JavaScript to execute when a document continues loading
The following steps create the placeholder window:
1. Create an HTML file to serve as the content of the “page loading”
placeholder window. Any content you want the user to see in that window should be placed in this file. Name the file holder.html. The following is a simple file that tells the user the main page is loading:
Page Loading ... Please Wait
</strong>
</body>
</html>
2. Create the HTML file for your main document in the same direc-tory. For this task, the file is named mainpage.html. A simple mainpage.htmlfile might look like this:
<html>
<head>
<title>The Main Page</title>
</head>
<body>
<p>This is the main page</p>
</body>
</html>
notes
•
Some sites create “page loading” placeholder pages. These are typically used when loading a page that will take a long time to load either because of the amount of content being loaded or, more commonly in the case of dynamic content, when processing the page for delivery to the user will take a long time.•
You can use a number of strategies for creating a“page loading” placeholder.
Such strategies can involve content being pushed from the server, or they can be entirely implemented in JavaScript on the client.
This task takes the latter approach.
Task 56
tip •
This type of placeholder doesn’t make much sense for a document as short as mainpage.html. In this case, the placeholder will appear and disappear almost immediately. You really need a long, compli-cated HTML document or a dynamic document that takes time to generate to make this type of place-holder worthwhile.In , add a script block to the header of the document:
<script language=”JavaScript”>
</script>
4. In the script block, open a new window with window.open. This method takes three arguments: the file to load in the window, the name of the window, and a series of parameters that define the features of the window—in this case, the width and height of the window are set to 200 pixels. The method returns a reference to the window’s objects so that it is possible to manipulate the window later. This reference is stored in the variable placeHolder: var placeHolder = window.open(“holder.html”,”Æ holderWindow,”width=200,height=200”);
5. Add an onLoadattribute to the bodytag:
<body onLoad=””>
6. As the value of the onLoadattribute, use placeHolder.close(). This closes the placeholder window once the main document finishes loading. The final mainpage.htmlcode looks like Listing 56-1.
<html>
<p>This is the main page</p>
</body>
</html>
Listing 56-1: Integrating the placeholder code into an HTML document.
7. Make sure holder.htmland mainpage.htmlare in the same directory and then load mainpage.htmlin your browser window.
A window with the contents of holder.htmlshould appear above the main window and then disappear as soon as the main window finishes loading.
Task 56
Part 3: Images and Rollovers
Task 57: Accessing an HTML-Embedded Image in JavaScript Task 58: Loading an Image Using JavaScript
Task 59: Detecting MouseOverEvents on Images Task 60: Detecting Click Events on Images Task 61: Switching an Image Programatically Task 62: Using Multiple Rollovers in One Page Task 63: Displaying a Random Image
Task 64: Displaying Multiple Random Images Task 65: Using a Function to Create a Rollover Task 66: Using a Function to Trigger a Rollover
Task 67: Using Functions to Create Multiple Rollovers in One Page Task 68: Creating a Simple Rollover Menu System
Task 69: Creating a Slide Show in JavaScript Task 70: Randomizing Your Slide Show
Task 71: Triggering Slide Show Transitions from Links Task 72: Including Captions in a Slide Show
Task 73: Testing if an Image Is Loaded
Task 74: Triggering a Rollover in a Different Location with a Link Task 75: Using Image Maps and Rollovers Together
Task 76: Generating Animated Banners in JavaScript Task 77: Displaying a Random Banner Ad