When we learned that the navigate method of the window object could be used to display a new URL, we alluded to a child object, called location.
The location object represents the current URL displayed by the browser. As you might expect, location's properties give information about the URL and its methods allow us to modify the browser's current location, but in a bit different way than we do with navigate.
The properties of location reflect every last thing we could ever hope to know about the link the browser is currently displaying. The following table describes each property and gives the value that the property would return for a URL of http://www.wrox.com:80/dhtml/book.htm?abc.
| Property | Value | Description |
| href | http://www.wrox.com:80/dhtml/book.htm?abc |
Complete URL |
| protocol | http: |
The protocol of the URL |
| host | www.wrox.com:80 |
Hostname and port number |
| hostname | www.wrox.com |
Name of host |
| port | 80 |
Port number (default is 80) |
| pathname | /dhtml/book.htm |
Path after the host property |
| search | ?abc |
Any value after a '?' in the URL |
| hash | (nothing in this example – would contain any anchor specified with #) | Any value after a '#' in the URL |
In our example we haven't specified that we want to jump to any bookmark that might exist in the document. To jump to the anchor named two, we'd use an address similar to this:
http://myserver/location.htm#two
In this case the hash property of the location object would contain the string '#two'.
If you look at the values for these properties a little closer, you'll see that the href property includes the information in all of the other properties. The browser parses the full href string and fills in the appropriate information for each property, saving us the trouble of interpreting the full string ourselves and making it easier to find any specific piece of information we might need without having to write explicit script code.
The other cool thing about the href property is how it's dynamically tied to the browser. Read the href property and nothing special will happen; change the href property and the browser will display the new page. Changing the browser's current URL in this manner is exactly the same as using the window.navigate method.
In the old Internet Explorer 3.0 object model, the location object had no methods.This has changed with IE4. We now have three methods that give us a bit more control over the browser's current location.
| Method | Description |
assign |
Loads the page specified, equivalent to changing the window.location.href property |
reload |
Reloads the current page and displays any changes to the HTML source |
replace |
Navigates to the URL passed as a parameter and replaces the current page in the history list with this new page |
With assign we can navigate to another page by passing the URL of the page when we call the method, like this:
location.assign("http://www.microsoft.com")
Using the reload method we can refresh the contents of a page we're viewing. While Internet Explorer 3.0 didn't have this method, we could achieve the same affect using the go method of the history object with a parameter of 0. This was an often-requested feature, and so it was given its own method in IE4.
Replace, on the other hand, is a completely new method that enables functionality we didn't have at all with Internet Explorer 3.0. The immediate effect is no different to the user than changing the href property or using the navigate method of the window object: the page the browser is displaying changes. The difference lies in what is added (or in this case not added) to the history list of the browser. When we change pages in a conventional manner, each new page is added to the end of Internet Explorer's history list, forming a queue of visited pages. In contrast, if we use replace to change our location, the current URL is overwritten by the new URL and won't remain in the history list.