Section C. Navigation

C. Navigation

The window object contains two objects that have to do with navigation: location and history.

Location

The location object contains information about the current location of the page, aka the URL. This object has eight properties, seven of which contain parts of the current URL. The eighth, and most important, property is href, which contains the entire URL.

The figure below shows which parts of the URL are accessed by the properties hash, host, hostname, href, pathname, port, protocol and search.

Figure 6.3. The hash, host, hostname, href, pathname, port, protocol, and search properties of the location object.

All of these properties are read/write, although in practice you'll only write to href and hash. I advise you to treat the other properties as read-only. In general it's not advisable to change, say, the port number of the current URL.

If you change the location.href of a document, the browser loads the new page. Similarly, if you change the location.hash, the page jumps to the new anchor (<a name="something"> or <element >). The page is not reloaded, since that's not necessary.

Finding the Page Name

In general you need to know the page name, i.e., the path, the search, and the hash. Unfortunately, no single property of location contains this information. pathname + search + hash can give incorrect results, since search also contains hash.

Here the lastIndexOf() method of strings comes in handy:

var URL = location.href; var pageName = URL.substring(URL.lastIndexOf('/')); 

Take a substring of location.href, starting at the last /. Now you have the page name, including any query strings and hashes.

The location object also contains two methods: reload() and replace(). The function of reload() is obvious: it reloads the current page from the server, which is occasionally useful if you work with dynamic data.

replace() commands the browser to replace the current page with the page on the URL specified in its argument:

location.replace('http://www.quirksmode.org'); 

Now the current page is replaced by QuirksMode.org.

href vs. replace()

Although it may seem that replace() has exactly the same function as href, this is not the case. If you change the location.href of a page, the browser loads the new page as if the user clicked on a link. The new page becomes a new entry in the window's history.

However, if you use replace(), the new page overwrites the old one in the window's history. In 2F we discussed the circumstances in which this difference is important.

History

The window contains a history object that gives limited access to its history.

Every window remembers which pages it has shown and makes these pages available through the Back and Forward buttons of the browser. This list of URLs is stored in the History object. For privacy reasons, however, it is not possible to read this list, with the sole exception of its length. You can send the user backward and forward in this list, but you cannot know for sure which page he'll end up in.

The history object has three methods: go(), back(), and forward(). The last two methods mimic the Back and Forward buttons of the browser.

The go() method allows you to specify how many pages you want the user to go forward (positive number) or backward (negative number). So this sends the user two pages backward:

history.go(-2); 

There's rarely a reason to send the user back more than one page, especially when you cannot find out which page that was, so the go() method is seldom used.

History of separate windows

Every window has a separate history. If you send the user on to a new window, its Back button doesn't function, because the new window doesn't yet have any pages in its history. And of course history.back() doesn't work, either.

The history of frames is even more complicated. Each frame has its own history object, but so do the parent and top frames. When the user clicks the Back button, the browser window generallybut not alwaysundoes the most recent page change in one of its child frames. Unfortunately, this behavior is not totally reliable, and you shouldn't write scripts that assume history.go() of the parent frame will undo all recent page changes in its child frames in the correct order.

If you want to send the user back in the history of one specific frame, use the frame's own history object:

frames[1].history.back();