Hypertext is wonderful. It allows the Webmaster to link from any page to millions of other computers all over the world. Unfortunately, the Web pages you find will only have the links that were placed by the Webmasters. What if you want more information about a word or a phrase on a page and there's no link?

This brief article shows how to add JavaScript code to your bookmarks - or favorites - thereby allowing you to do some fancy linking where no links exist.

For example, if a Web page contains the word ennui and you want a definition for it, you could hunt through your bookmarks for Webster's Dictionary, go there, type the word in, go back to your original page, check the spelling of the word, find your way back to the dictionary again and then type it in correctly. Instead, this tiny program allows you to select a word and use a bookmark to search the dictionary for it. A click to your browser's "back" button and you're back again (see Listing 1).

To put this code into a Netscape bookmark, first create a new bookmark in your personal toolbar folder (or anywhere else). Then edit bookmarks and change the properties of your new bookmark. Change the name to "Webster for" and the location (URL) to that JavaScript code, starting with the javascript: tag instead of the usual http:// tag. Now double-click on a word from any document and you can look it up in the dictionary with one click.

This works because of a new feature added to Netscape Navigator 4.0: the ability for JavaScript to detect what text has been selected by the user. When the user uses the mouse to highlight (or select) text in a document, the document.getSelection() method will return a string containing the text.

But there are a few problems with this code. First of all, it doesn't work in Microsoft Internet Explorer (MSIE). MSIE has a different way of detecting current selections. Second, this code won't work if you select text from a framed HTML page. The text you select is in the framed document, not the top document, so this code won't see the selection. Solving these two problems is a bit tricky.

In MSIE 4.0 the document object has a selection property that returns the selection object. You can create a text range object from the selection object by using the createRange() method. Then you can use the text property to get the selected text. See: .

Doing this is incompatible with Net-scape's text selection model but that's okay because you'll only be using these bookmarks in one browser anyway. We'll just make two different kinds of bookmarks to cover the two different browsers (see Listing 2).

Note: We could use guard statements to make the same code work in both browsers, but in this case, why bother? You'll only be using the code in one browser anyway.

The next problem - detecting text selections in framed documents - is much harder. We need to walk through all the frames in the parent document and all the frames in each of those frames, recursively, to detect the text selection (see Listing 3).

What a mess! The JavaScript bookmarks all have to be on one line in order to work as bookmarks, but it makes them hard to read. Expanding the code and adding some comments will make it easier to figure out what's going on (see Listing 4).

We use the A and C variables to make it easier to change the JavaScript as the folks at Webster's update their CGI programs, and to standardize the program for other search engines.

See Listing 5 to see how to do the same thing with MSIE.

If you look carefully, you'll notice the MSIE process for selecting text and a slightly different way to index the frames array.

MSIE calls them favorites instead of bookmarks. To set this favorite in MSIE, add a new favorite and create it in the links folder. Change the name to "Webster for," then use the right mouse button (or Alt/Enter) to change the properties of the new favorite. Under the Internet shortcut tab, change the target URL to the JavaScript code in Listing 5, including the javascript: tag instead of the usual http:// tag. An error message will appear that you can safely ignore for now. (see Figure 1).

The error message indicates that MSIE doesn't seamlessly support javascript: favorites. There may be further problems getting them to work if MSIE isn't your default browser. To set MSIE as your default browser, view the Internet options, then select the Programs tab. Check the box to tell MSIE to check if it's the default browser, and restart MSIE (see Figure 2).

Note: Of course, this won't work if you want Netscape to be your default browser. If Netscape is your default browser you can still use Netscape javascript: bookmarks, but not MSIE javascript: favorites. You'll run into errors if you try to use both. If MSIE is your default browser you can use both with no trouble.

In Listings 3 and 5 we used two variables, A and C, to describe the URL of the CGI program used by the search engine. There are several other options for searching different kinds of engines around the Internet. Use the JavaScript code above and substitute the different values for A and C below:
1. Searching AltaVista:
var A='http://www.altavista.digital.com/
cgi-bin/query?pg=q&stq=20&what=web&kl=XX&q="';var C='"',
2. Searching HotBot:
var A='http://www.search.hotbot.com/hRes-ult.html?MT="';var C='"';
3. Searching Excite:
var A='http://search.excite.com/search.gw?-search="';var C='"';
4. Searching DejaNews:
var A='http://www.dejanews.com/dnquery-.xp?QRY="';var C='"&defaultOp=AND&svcclass=dncurrent&maxhits=20&ST=QS&format=terse&DBS=2';

How do you figure out the values for A and C in order to harness the power of another search engine? It's a little tricky. You must analyze the HTML form used to start the search, and set up A and C to encode all of the variables, using METHOD=GET.

Let's visit http://www.lycos.com/. There's a search form there and it already uses METHOD=GET. Search for a word - say fiction - and look at the URL of the results page:

<http://www.lycos.com/cgibin/pursuit?matchmode=and&cat=lycos&query=fiction>

Now we can construct A and C accordingly.

5. Searching Lycos:
var A='http://www.lycos.com/cgi-bin/ pursuit?match-mode=and&cat=lycos&query=';-var C='';

Here's one that doesn't quite fit the pattern. You can select a person's name from the text of a Web page and then use this code to search switchboard.com (see Listings 6 and 7).

Listing 7 is a little different because we need to split the selection into a first and last name, then send those as two different variables.

A Related Technique
Here's another little JavaScript book-mark/favorite that works in both MSIE and Netscape. It searches AltaVista to find external links to the current Web site. You can use this bookmark/favorite to find related sites as well as to gauge the relative popularity of a site (see Listing 8).

Netscape Communicator 4.06 added a "What's Related" feature that uses a central database of related Web sites from Alexa. Listing 9 shows how you can add this capability to other browsers.

Conclusion
You can use these techniques to add a little JavaScript power to every Web site you visit. If you find another use for the techniques you've learned here, drop me a line.