14.7 Links

The links[] array of the Document object contains Link objects that represent each of the hypertext links in a document. Recall that HTML hypertext links are coded with the href attribute of the <a> tag. In JavaScript 1.1 and later, the <area> tag in a client-side image map also creates a Link object in the Document links[] array.

The Link object represents the URL of the hypertext link and contains all the properties that the Location object (introduced in Chapter 13) does. For example, the href property of a Link object contains the complete text of the URL to which it is linked, while the hostname property contains only the hostname portion of that URL. See the client-side reference section for a complete list of these URL-related properties.

Example 14-5 shows a function that generates a list of all the links in a document. Note the use of the Document write( ) and close( ) methods to dynamically generate a document, as discussed earlier in this chapter.

Example 14-5. Listing the links in a document

/*
 * FILE: listlinks.js
 * List all links in the specified document in a new window
 */
function listlinks(d) {
    var newwin = window.open("", "linklist", 
                             "menubar,scrollbars,resizable,width=600,height=300");

    for (var i = 0; i < d.links.length; i++) {
        newwin.document.write('<a href="' + d.links[i].href + '">')
        newwin.document.write(d.links[i].href);
        newwin.document.writeln("</a><br>");
    }
    newwin.document.close(  );
}

14.7.1 Links, Web Crawlers, and JavaScript Security

One obvious use of the Link object and the links[] array is to write a web-crawler program. This program runs in one browser window or frame and reads web pages into another window or frame (by setting the location property of the Window object). For each page it reads in, it looks through the links[] array and recursively follows them. If carefully written (so it doesn't get caught in infinite recursion or start going in circles), such a program can be used, for example, to generate a list of all web pages that are accessible from a given starting page. This list can be quite useful in web-site maintenance.

Don't expect to crawl the entire Internet using these techniques, however. For security reasons, JavaScript does not allow an unsigned script in one window or frame to read the properties (such as document.links) of another window or frame unless both windows are displaying documents that came from the same web server. This restriction prevents important security breaches. Imagine that an employee at a large, security-conscious company is browsing the Internet through a corporate firewall and is also using another browser window to browse proprietary company information on the corporate intranet. Without the security restriction we've described, an untrusted script from some random Internet site could snoop on what was going on in the other window. The authors of the snooping script might not be able to glean much useful information from the links[] array of the proprietary documents, but this would nevertheless be a serious breach of security.

The web-crawler program we have described is not a threat to Internet security or privacy, but unfortunately, it is still subject to the general security restrictions of JavaScript, which prevent it from crawling very far beyond the site from which it was loaded. (When the crawler loads a page from a different site, it appears as if that page simply has no links on it.) See Chapter 21 for a complete discussion of JavaScript security, including a description of how to avoid this security restriction with signed scripts.

14.7.2 Link Event Handlers

The Link object supports a number of interesting event handlers. We already saw the onmouseover event handler in Section 13.3, where it was used with both <a> and <area> tags to change the message in the browser's status line when the mouse moved over the link. The onclick event handler is invoked when the user clicks on a hypertext link. In JavaScript 1.1 and later, if this event handler returns false, the browser doesn't follow the link as it would otherwise. As of JavaScript 1.1, both the <a> and <area> tags support an onmouseout event handler. This is simply the opposite of the onmouseover handler -- it is run when the mouse pointer moves off a hypertext link.

The event-handling model has become much more general in JavaScript 1.2, and links support quite a few other event handlers. See Chapter 19 for details.

Finally, it is worth mentioning that href and the other URL properties of the Link object are read/write. Thus, you can write a JavaScript program that dynamically modifies the destinations of hypertext links! Here is a frivolous piece of JavaScript-enhanced HTML that uses a Link event handler to write to the href property and create a link whose destination is randomly chosen from the set of other links in the document:

<a href="about:"
   onmouseover="status = 'Take a chance... Click me.'; return true;"
   onclick="this.href =
           document.links[Math.floor(Math.random(  )*document.links.length)];"
>
Random Link
</a> 

This example demonstrates all the features of the Link object that we've considered: the links[] array, the use of Link event handlers, and the dynamic setting of the destination of a link. Note that the example sets the href property of the link but doesn't bother to read the href property of the link it randomly chooses. Instead, it relies on the toString( ) method of the Link object to return the URL.