JavaScript Links
When building web pages, we often need to use HTML links. These are links that, when clicked on, usually redirect the browser to another URL. You might be aware that HTML links can be styled using CSS - resulting in what you could call CSS links.
There is also such a thing as JavaScript links. JavaScript links can be more powerful than their HTML counterparts. By "JavaScript links", I'm referring to hyperlinks that, when clicked on, trigger a piece of JavaScript code. This code could do anything - open another webpage, open a popup window, open an alert box, and more. JavaScript gives you a lot of control over what happens when someone clicks on a link.
Here, we look at some of the cool things you can do with JavaScript links.
JavaScript Link Code
Just as you can use HTML to create a link, you can also use JavaScript to create a simple link. You do this with document.location.href="{URL}" where {URL} is the destination URL. You can also use single quotes if your JavaScript code is being used inside an HTML attribute (as per the example below).
Example:
JavaScript Links - New Window
This example uses JavaScript to open a link in a new window or tab. To do this, we use the window.open() method. Note the void(0) in the anchor tag. This prevents the original window from refreshing when the link is clicked.
JavaScript Links - Popup Window
In the above example, many browsers will open the URL in a new browser tab - not a new window. If you prefer, you can force the link to open in a popup window.
This example uses JavaScript to create a popup window. To do this, we use the same code as above. The only difference is that we add some parameters to the window.open() method. These parameters determine things like the popup window size, its position, whether it should be resizable, whether it will have scrollbars, location bar, and more. Feel free to change these parameters as you wisth. Again, we use the void(0) in the anchor tag.
JavaScript Links - Artificial Links
Because JavaScript links use the onclick method, they don't actually need the HTML anchor tag. In other words, you can create JavaScript links without using the <a> tag. This is because, the onclick method can work on any HTML element - it doesn't need to be used with the anchor tag.
In this example, we simply add the onclick method straight into the <p> tag. So, click on the text below. It's actually a link, even though it doesn't look like it.
| Source Code |
Result |
|
Great website tutorials!
|
Add Styles
JavaScript links like the above one could be quite confusing for users. This is because it doens't look like a link. You can easily change this using CSS. You can use CSS to change the color of the text, and create an underline etc, so that it looks more like a hyperlink. You can also make it behave like a hyperlink. For example, you can change the cursor into a hand/pointer when the user hovers over the link. To apply styles to your JavaScript link, use the style attribute. Like this:
| Source Code |
Result |
|
Great website tutorials!
|
For more info on changing styles of your hyperlinks, see CSS Links.
