Learn Advanced JavaScript Programming

Table of Contents

JavaScript provides a property for the current anchor reference in the URL. This property is named hash (location.hash), because anchor references are stored in a hash table. You can assign a string to location.hash in order to direct the browser to a specified anchor within the current page. Like the href property, hash is also readable. You should use this property only when dealing with local anchors residing within the current document. Suppose the following document is saved as an .html file on a server, or even on your computer:

<HTML>
<HEAD>
<TITLE>status bar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function loadPage() {
   location.href = "http://www.geocities.com/SiliconValley/
 9000/index.html"
   location.hash = "authors"
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="loadPage()">
</BODY>
</HTML>

The function loadPage() (called via the onLoad event handler) attempts to load the page <URL:http://www.geocities.com/SiliconValley/9000/index.html>. Since the browser does not wait until the page is loaded, the function continues to execute, advancing to the following statement. However, this statement also attempts to modify the URL of the page by specifying an anchor, via the location.hash property. Since the anchor resides on the current page, it is loaded immediately. The anchor is not found on the current page because it is on the page that was loaded before. By trying to allocate an anchor, the onLoad event handler is triggered, executing the function once again. The encountered loop is obviously infinite, and continues until the user presses the big red “stop” button. It is very important to remember not to assign location.hash separately from location.href. You must assign them at the same statement:

function loadPage() {
   location.href = "http://www.ods.com.ua/index.html#authors"
}

When attempting to modify multiple properties of href, you should assign the property href instead, as it refers to a complete URL, including anchor references, search specifications, and all other properties of the location object. In general, the location.hash property is the only one that can be assigned separately to adjust the current anchor referencing position within the current document. Also, bear in mind that a page reload will follow the property assignment.

A common problem for beginners is that the value of the hash property seems to be inconsistent at times. For example, location.hash evaluates to an empty string if no anchor is referenced. If an anchor is specified, though, both the hash mark (#) and the anchor name are part of this property. When changing the value of an anchor, do not include the hash mark.

The following HTML document will clear up this matter:

<HTML>
<HEAD>
<TITLE>location.hash property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function goNext(nextAnchor) {
location.hash = nextAnchor
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<A NAME="anchor1">Top</A>
<BR>
<FORM>
<INPUT TYPE="button" VALUE="advance" onClick="goNext('anchor2')">
</FORM>
<BR>
<HR>
<BR>
<A NAME="anchor2">Middle</A>
<BR>
<FORM>
<INPUT TYPE="button" VALUE="advance" onClick="goNext('anchor3')">
</FORM>
<BR>
<HR>
<BR>
<A NAME="anchor3">Bottom</A>
<BR>
<FORM>
<INPUT TYPE="button" VALUE="advance" onClick="goNext('anchor1')">
</FORM>
</BODY>
</HTML>

Example 19-1 (ex19-1.htm). A script that jumps to anchors without using common links.

In order to observe the effect of the script in Example 19-1, you must resize the browser window to make it smaller than the full document (the scroll bar should appear), because referencing a named anchor has no effect if the anchor is already in view. By clicking each of the four buttons on the page, the focus is placed on a corresponding anchor and on a different button. Clicking the fourth button scrolls the page to the first anchor and to the beginning of the page. Since HTML does not support linking form buttons to anchors, you must use JavaScript to accomplish such a task.

host

The location.host property is not commonly used, but we shall cover it for completeness. This property represents the <host>:<port> part of a URL, not only the <host> (see location.hostname). When the scheme is file and the file is local, this property is an empty string. When no port is specified, the value of location.host is equal to location.hostname, or <host>. Suppose the complete URL of a page is <URL:http://www.geocities.com:80/SiliconValley/9000/index.html>. The value of location.host, if queried on that page, is www.geocities .com:80. This value is always equal to the expression location.hostname + ":" + location.port. The colon is included only when a port is explicitly specified. The basic rule is that if the browser’s “location” box does not include the port, it is not part of the location.host string.

Since “80” is considered the default port, the following function displays the full <host>:<port> portion of the URL:

function alertHost() {
var colonIndex = location.host.lastIndexOf(":")
var port = (colonIndex == –1) ? ":80" : ""
alert("The complete host specification is: " + location.host + port)
}

If you call this function from the page <URL:http://www.geocities .com/SiliconValley/9000/index.html>, the value displayed in the alert box is www.geocities.com:80. The same value is displayed if the page is loaded directly via the full host specification: <URL:http://www.geocities.com:80SiliconValley/9000/index.html>.

Table of Contents