Sams Teach Yourself JavaScript in 24 Hours

Working with the `location` Object

A third child of the window object is the location object. This object stores information about the current URL stored in the window. For example, the following statement loads a URL into the current window:

window.location.href="http://www.starlingtech.com";

The HRef property used in this statement contains the entire URL of the window's current location. You can also access portions of the URL with various properties of the location object. To explain these properties, consider the following URL:

http://www.jsworkshop.com:80/test.cgi?lines=1#anchor

The following properties represent parts of the URL:

location.protocol is the protocol part of the URL (http: in the example).
location.hostname is the host name of the URL (www.jsworkshop.com in the example).
location.port is the port number of the URL (80 in the example).
location.pathname is the filename part of the URL (test.cgi in the example).
location.search is the query portion of the URL, if any (lines=1 in the example). Queries are used mostly by CGI scripts.
location.hash is the anchor name used in the URL, if any (#anchor in the example).
The link object, introduced earlier this hour, also includes this list of properties for accessing portions of the URL.
By the Way

Although the location.href property usually contains the same URL as the document.URL property described earlier in this hour, you can't change the document.URL property. Always use location.href to load a new page.

The location object has two methods:
location.reload() reloads the current document. This is the same as the Reload button on the browser's toolbar. If you optionally include the true parameter, it will ignore the browser's cache and force a reload whether the document has changed or not.
location.replace() replaces the current location with a new one. This is similar to setting the location object's properties yourself. The difference is that the replace method does not affect the browser's history. In other words, the Back button can't be used to go to the previous location. This is useful for splash screens or temporary pages that it would be useless to return to.

Try It Yourself

Creating Back and Forward Buttons

You can use the back and forward methods of the history object to add your own Back and Forward buttons to a web document. The browser already has Back and Forward buttons, of course, but it's occasionally useful to include your own links that serve the same purpose.

You will now create a script that displays Back and Forward buttons and use these methods to navigate the browser. Here's the code that will create the Back button:

<input type="button" onClick="history.back();" value="<-- Back">

The <input> tag defines a button labeled Back. The onClick event handler uses the history.back() method to go to the previous page in history. The code for the Forward button is similar:

<input type="button" onClick="history.forward();" value="Forward -->">

With these out of the way, you just need to build the rest of the HTML document. Listing 4.2 shows the complete HTML document, and Figure 4.2 shows a browser's display of the document. After you load this document into a browser, visit other URLs and make sure the Back and Forward buttons work.

Figure 4.2. The Back and Forward buttons in Internet Explorer.

[View full size image]

Listing 4.2. A Web Page That Uses JavaScript to Include Back and Forward Buttons

[View full width]
<html> <head><title>Back and Forward Buttons</title> </head> <body> <h1>Back and Forward Buttons</h1> <p>This page allows you to go back or forward to pages in the history list. These should be equivalent to the back and forward arrow buttons in the browser's toolbar.</p> <p> <input type="button" onClick="history.back();" value="<-- Back"> <input type="button" onClick="history.forward();" value="Forward -->"> </p> </body> </html>

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]

Main Menu

	More Books
	PHP Hacks
	Processing Xml With Java - A Guide To Sax, Dom, Jdom, Jaxp, And Trax
	The Koran (Holy Qur'an)
	Macromedia Flash 8 Bible
	Search Engine Optimization for Dummies
	YouTube Traffic
	PHP 5 for Dummies
	Harry Potter and The Chamber of Secrets
	Harry Potter and the Sorcerer's Stone
	The Pilgrim's Progress
	Wireless Hacks
	Flash Hacks. 100 Industrial-Strength Tips & Tools
	PayPal Hacks. 100 Industrial-Strength Tips and Tools
	Amazon Hacks
	Pdf Hacks
	The Da Vinci Code
	Google Hacks
	The Holy Bible
	Windows XP For Dummies
	Harry Potter and the Half-Blood Prince
	Seo Book
	Upgrading and Repairing Networks
	Macromedia Dreamweaver 8 UNLEASHED
	Windows XP Annoyances
	Windows XP Hacks
	Microsoft Windows XP Power Toolkit
	Teach Yourself MS Office In 24Hours
	iPod & iTunes Missing Manual
	PC Hacks 100 Industrial-Strength Tips and Tools
	PC Overclocking, Optimization, and Tuning - 2th Edition
	PC Hardware In A Nutshell 3rd Edition
	PC Hardware in a Nutshell, 2nd Edition
	Upgrading and Repairing PCs
	Google for Dummies
	MySQL Cookbook
	Teach Yourself Macromedia Flash 8 In 24 Hours
	PHP CookBook
	Sams Teach Yourself JavaScript in 24 Hours
	PHP5 Manual

Free Games Paper Airplanes

500 Kostenlose Spiele

Sams Teach Yourself JavaScript in 24 Hours

Working with the location Object

Try It Yourself

Creating Back and Forward Buttons

Figure 4.2. The Back and Forward buttons in Internet Explorer.

Listing 4.2. A Web Page That Uses JavaScript to Include Back and Forward Buttons

Working with the `location` Object