Home / JavaScript Tutorials / Understanding the various types of links
Home / JavaScript Tutorials / Understanding the various types of links |
Understanding the various types of links
In this tutorial, we'll revisit the part of HTML responsible for spinning the web into what it is today: links. Links are among the very first things all webmasters learn, but many did not know that there is life after the href and mailto link.
A standard looking link in a document looks something like this:
<a href="page1.htm">Click here</a>
Clicking on the above will take us to "page1.htm". While most authors are content with using a link to simply link to a page or as a mailto link, its important to realize that it has other functions too. The below lists these functions:
| Types of links | Functions |
| http: | Takes us to another html document |
| mailto: | Opens up the default email program |
| javascript: | Executes a JavaScript code |
| view-source: | Views the source of the specified document |
| about: | Views information about the browser, such as cache, version etc. |
Lets explain in detail the later three:
JavaScript:
A link can execute a JavaScript command upon clicking (instead of loading a page). Simply use the keyword JavaScript:, along with the code to execute:
<a href="JavaScript:window.location.reload()">Click to reload!</a>
view-source:
By default, whenever we want to view the source of a document, we would reach for "view" of the toolbar of our browser. This "view" function can actually be simulated using a special kind of link- the view-source link. The standard syntax required is:
<a href="view-source:complete file path">Click to view the source!</a>
The path has to be complete, not simply the name of the file. Here are a couple of examples:
<a href=
"view-source:file:///C|/web/wa/index.htm">
Click to view the source!</a>
<a href=
"view-source:http://www.javascriptkit.com/index.htm">
Click to view the source!</a>
Here's where JavaScript comes in. Due to the fact that a html document can be viewed both online and offline (downloaded onto a harddrive), hard coding the complete path of a file to view source will produce a bad link in one of the two cases above. You may have entered http://www.javascriptkit.com/javatutors/links.htm in the view-source command while the surfer is viewing the page offline (file:///C|/web/javatutors/links.htm). To solve this little problem, simply use the window.location property of JavaScript to dynamically determine the current path of the html document:
<script>
function viewthesource(){
window.location="view-source:"+window.location
}
</script>
<a href="javascript:viewthesource()">
Click to view source!</a>
about:
"about:" allows a link, when clicked on, to directly display information we would normally use features of the toolbar to display, such as cache or plugin information. The "about" command does NOT work with Internet Explorer browsers. Lets see the available information displayable using the about: command:
| Syntax | Functions |
| about: | Simulates "About Netscape" in the "Help" menu of Netscape |
| about:cache | Displays disk cache information (this feature is disabled if your browser does not permit the viewing of cache). |
| about:plugins | Simulates "Plug-ins" in the "Help" menu of Netscape |
Putting it all together:
Click to view browser information
Click to view cache information
Click to view plugins information
<a href="about:">Click to view browser information</a>
<a href="about:cache">Click to view cache information</a>
<a href="about:plugins">Click to view plugins information</a>
Now that you're armed with more link knowledge, go out and fortify your position on the WWW!
http://www.javascriptkit.com
CopyRight © 1997, 1998 JavaScript Kit. NO
PART may be reproduced without author's permission.