10.1 Loading a New Page or Anchor

NN 2, IE 3

10.1.1 Problem

You want a script (instead of a hardwired link) to perform the navigation to another page or anchor.

10.1.2 Solution

To load a different page into the current window or frame, assign the new page's URL string to the location.href property:

location.href="http://www.megacorp.com/products/framistan309.html";

To navigate to an anchor on the current page, assign the anchor's name string (the value assigned to the a element's name attribute) to the location.hash property:

location.hash = "section03";

10.1.3 Discussion

The URL value you assign to the location.href property can be a relative or complete URL, in string form. A relative URL is influenced by any <basehref> tag that may be delivered with the page (sometimes a server is configured to deliver this tag with all pages, and it is occasionally visible in a browser's source view). Because an assignment statement using location.href unloads the current page, you cannot count on any script statements below this one to execute before the page and all its variables and values disappear (although some browsers seem to operate a little bit ahead).

Knowing how popular scripted navigation could become, Brendan Eich (JavaScript's creator) built a shortcut into the location object that forces it to receive any string assigned to the object as being the equivalent of assigning the value to the href property. Thus, the following statements perform the same action:

location = "someplaceElse.html";
location.href="someplaceElse.html";

Even so, it is good practice to utilize the location.href property approach to avoid any potential snafus in future implementations.

Some other ways to navigate via scripting have been supported in varying degrees in earlier browsers, presented here primarily for historical accuracy, but also to let you know what the code means if you encounter it in existing scripts. In addition to the location object, the document object was also, especially in the early days, an alternative object for navigation. The document object is more concrete than the abstract location object, which may have had some part in the document object's origin.

At one time, the document object also bore a location property (document.location), whose value is a relative or complete URL string. Due to potential internal semantic confusions with the location object, the document.location property was deprecated starting in Navigator 3. In its place came the read/write document.URL property. This property's value, too, is a URL string.

The structure of the W3C DOM, however, made it untenable for document.URL to act as a navigation device (in fact, there is explicitly no navigation mechanism in the DOM Level 2 specification). While the URL property is still included as a property of the HTMLDocument object (the root document node of an HTML document), the property is read-only in that specification. Thus, going forward, you can expect that property to be read-only (as it is in Mozilla-based browsers), and no longer usable as a navigation property.

One final bit of arcana on the subject is that Microsoft implemented a window.navigate( ) method in the earliest scriptable IE version, and it persists to this day in all platform versions of IE. The sole parameter to the method is a string of the URL. Don't use this method unless your code will be used forever in the future only by Internet Explorer.

When scripting navigation to an anchor in the current page via the location.hash property, do not include the # delimiter character that normally goes between the page URL and anchor name. This behavior differs from the location.search property, which requires the ? delimiter character that starts the search string portion of a URL. Navigation to an anchor on the same page should be nearly instantaneous. If you are seeing the browser (notably IE for Windows) hit the server each time you assign a value to the location.hash property, the server is most likely configured to convey page headers that expire the page immediately or don't cache the page. If you allow the page to cache, the anchor navigation should be speedy.

10.1.4 See Also

Recipe 5.10 for navigating to different pages from a link based on browser capabilities; Recipe 7.2 and Recipe 7.3 for scripting the navigation of other frames in a frameset; Recipe 7.4 for navigating from a frameset to a page without a frameset.