Using Hyperlinks

Using JavaScript, you can manipulate hyperlinks in a page easily. For example, take a look at this script, which changes a hyperlink's destination URL when the user clicks a button (if you're using JavaScript, you need NS6+ to use getElementById like this):

(Listing 14-01.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Changing a link's URL          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function changeURL()   {   document.getElementById("link1").href="http://www.w3c.org"   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Changing a link's URL</H1>          Want more information? <A ID="link1" HREF="http://www.microsoft.com">Click  here.</A>          <FORM>  <INPUT TYPE="BUTTON" ONCLICK="changeURL()" VALUE="Click me to change the  link's URL">  </FORM>      </BODY>  </HTML>

This is useful if, for example, you want to change the URLs in a page to point to different language versions of web pages on your site.

Note that the ONCLICK attribute overrides the HREF attribute if scripting is enabled. This means, for example, that you can have an <A> element send the user to a JavaScript-enabled or non-enabled page as appropriate, like this:

 <SCRIPT LANGUAGE="JavaScript">      <!--  function goTo()   {   location.href="JSPage.html"   }  // -->  </SCRIPT>          .          .          .  <A HREF="nonJSPage.html" ONCLICK="goTo()">Click here to see my page.</A>

Alternatively, you can just automatically change a hyperlink's URL for JavaScript-enabled browsers when a page loads, and use a default URL for non-enabled browsers:

 <SCRIPT LANGUAGE="JavaScript">      <!--  document.getElementById("link1").href="JSPage.html"  // -->  </SCRIPT>          .          .          .  <A HREF="nonJSPage.html" ID="link1">Click here to see my page.</A>

Using JavaScript URLs

As we saw in Chapter 7, "Using window and frame Properties," you also can use JavaScript URLs . A JavaScript URL is actually a JavaScript function that the browser treats as a URLyou just preface the function name with "javascript:" . When the browser jumps to that URL, it just runs the JavaScript function. You can connect the HREF attribute of <A> elements to JavaScript URLs (just as we did with the SRC attribute of <FRAME> elements in Chapter 7see "Creating Frames in JavaScript: JavaScript URLs" in that chapter), which means you're able to execute JavaScript when the user clicks a link, just as if they had clicked a button.

Here's a useful example. This code opens a URL in a new window when the user clicks a hyperlink, which means the user doesn't have to leave the current page even when he clicks a hyperlink:

 <HTML>      <HEAD>          <TITLE>              Opening New Windows Using Hyperlinks          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function opener()   {   window.open("http://www.w3.org")   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Opening New Windows Using Hyperlinks</H1>          <FORM>  Take a look at <A HREF="javascript:opener()">W3C</A>.  </FORM>      </BODY>  </HTML>

Here's another example. This one uses a navigation bar with hyperlinks and frames. In this case, I'll load existing documents into a target frame when the user clicks hyperlinks in the navigation bar for the most part. When the user clicks the link for Page 3 in the navigation bar, however, a JavaScript function will create a new document from scratch instead of loading a preexisting document, and load that new document into the target frame. You can see what this looks like in Figure 14.1, where the navigation bar is on the left and I've clicked the Page 3 link to create and display a new document in the frame on the right.

Figure 14.1. Creating a new document.

graphics/14fig01.gif

Here's what the <FRAMESET> document (which is what you're looking at in Figure 14.1) looks like for this example 14-03.html is the navigation bar, and the frame named "display" is the target frame that will display documents:

(Listing 14-02.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Targeted Frames          </TITLE>      </HEAD>      <FRAMESET COLS="40%, 60%">          <FRAME SRC="14-03.html">          <FRAME NAME="display">      </FRAMESET>  </HTML>

And here's the navigation bar page, 14-03.html , that does all the work. Note the JavaScript URL for the HREF attribute for page 3 here:

(Listing 14-03.html on the web site)

 <HTML>      <HEAD>          <SCRIPT LANGUAGE="JavaScript">              <!--  function page3()   {   top.frames[1].document.write("<HTML><HEAD><TITLE>Frame</TITLE></HEAD>" +   "<BODY><H1>Welcome to page 3!</H1></BODY></HTML>")   parent.frames[1].document.close()   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <OL>              <LI>                  <A HREF="frame1.html" TARGET="display">                  Page 1                  </A>              </LI>              <LI>                  <A HREF="frame2.html" TARGET="display">                  Page 2                  </A>              </LI>              <LI>  <A HREF="javascript:page3()">  Page 3                  </A>              </LI>          </OL>      </BODY>  </HTML>

Tip

As of NS3 and IE4, you also can preface the JavaScript function's name with the keyword void to guarantee that the function does not inadvertently navigate the browser somewhere, like this: HREF="javascript: void function1()" . The void keyword discards any return value from the function.

In fact, there's a simpler way to do this: Instead of executing a function to write a new document to the display frame, you could just have that function return the HTML for the new document. Using the TARGET attribute of the <A> element, the browser will place that HTML in the named frame automatically. Here's what the <FRAMESET> document would look like in this case (you'll need NS6+ if using the Netscape Navigator here):

(Listing 14-04.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Targeted Frames          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function page3()   {   return "<HTML><HEAD><TITLE>Frame</TITLE></HEAD>" +   "<BODY><H1>Welcome to page 3!</H1></BODY></HTML>"   }  //-->          </SCRIPT>      </HEAD>      <FRAMESET COLS="40%, 60%">          <FRAME SRC="14-05.html">          <FRAME NAME="display">      </FRAMESET>  </HTML>

And here's what the navigation bar page would look like. Note that I've set the TARGET attribute of the <A> element with the JavaScript URL to the display frame:

(Listing 14-05.html on the web site)

 <HTML>      <HEAD>          <TITLE>Frame</TITLE>      </HEAD>      <BODY>          <OL>              <LI>                  <A HREF="frame1.html" TARGET="display">                  Page 1                  </A>              </LI>              <LI>                  <A HREF="frame2.html" TARGET="display">                  Page 2                  </A>              </LI>              <LI>  <A HREF="javascript:parent.page3()" TARGET="display">  Page 3                  </A>              </LI>          </OL>      </BODY>  </HTML>

That's all it takes.

Keep in mind that the hyperlinks in a document also are available using the document object's links and anchors collections. The links collection holds all <A> elements with HREF attributes, and the anchors collection holds all <A> elements with NAME attributes. For example, we could have written document.getElementById("link1").href="http://www.w3c.org" in Listing 14.1 as document.links[0].href="http://www.w3c.org" . See Table 9.2 and "The document Object Collections" in Chapter 9, "Using the document and body Objects," for more information on these collections.

Tip

Keep in mind that hyperlinks don't just have to hold URLs; they also can hold mailto: URLs, such as " mailto:steve@starpowder.com?subject=hello " .