Finding the Page's Location and Title The URL (Uniform Resource Locator) of a Web page is its unique address on the Web. The title is the designation you give that page between the <title> tags in the head of your document. You can easily display these two useful bits of information on the originating Web page using self.location and document.title objects (Figures 13.8 and 13.9). Figure 13.8. The general syntax for the location object. 
Figure 13.9. The general syntax for the title object. 
In this example (Figure 13.10), the title for the page is used as the text for a hyperlink to the page. Figure 13.10. The linked title and page URL are displayed. 
URI or URL? Notice that I call the variable that stores the page's location pageURI instead of pageURL. "URL" stands for Uniform Resource Locator, whereas "URI" stands for Uniform Resource Identifier. What's the difference? Not much, really, but for some reason the World Wide Web Consortium decided that the more commonly used URL was too specific a term and decided to switch to URI instead. Does this really change your life? No. Should you start using URI instead of URL when referring to a Web page's address? Only if you want to confuse your friends and impress your enemies. |
To find the page's location and title: 1. | var pageURI = self.location;
Add the variable pageURI to your JavaScript, and assign to it the value self.location. This value is the address of your Web page (Code 13.3).
Code 13.3. The variables pageTitle and pageURI are defined and then displayed on the page. The URI is also used to create a link back to this page when the user clicks the title.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Finding Page Location and Title</title> <style type="text/css" media="screen"> body { font: 1em Georgia, "Times New Roman", times, serif; color: #000; background-color: #ccc; margin: 8px; } </style> </head> <body> <script type="text/javascript"> <!-- var pageURI = self.location; var pageTitle = document.title; document.writeln('The location of the page titled <i><a href="' + pageURI + '">' + pageTitle + '</a></i> is: <br>'); document.writeln(pageURI); //--> </script> </body> </html>
|
| 2. | var pageTitle = document.title;
Add the variable pageTitle to your JavaScript, and assign to it the value document.title. This value is the title of your documentthat is, whatever you place between the <title> and </title> tags on the page.
|
You can now use these variables for a variety of purposes. The simplest is to write them out on the page, as Code 13.3 does. In addition, I used the page's location to set up the title as a link back to this page.  Tips
When creating a printer-friendly version of the page, adding the URL for the original link at the bottom of the page is a great way of ensuring that the reader can find the original source. For more information about the difference between a URI and a URL, check out the sidebar "URI or URL?URI or URL?"
|
