Opening XHTML links in a new window with jQuery
When I am visiting a website and reading a blog post or forum thread, I like it when I click on a link that is going to take me to another domain, that it opens in a new tab or window. It is just a personal preference but, especially on really long pages, it takes forever to reload the content when I click the back button. It is far more convenient for me to just hit Command + W (ctrl + W) to close the new tab when I am done reading it and be right were I was on the page where I clicked the link. For example, When I am reading articles on Digg and I click a link to read the actual article, it would suck if it simply went to the article, especially if I am halfway through a boatload of nested comments.
With HTML 4, all you needed to do was add a target="_blank" attribute to your anchor tags. In XHTML, the "target" attribute has been depreciated.
If you want your pages to validate to XHTML 1.0 Strict or XHTML 1.1, You are S.O.L. on opening the links in a new window without some Javascript. I prefer to use the jQuery library, so I am going to discuss how to open links in a new window with that.
First, I marked up all my external links with a class of "external_link".
For example <a href="http://google.com"
class="external_link" title="Google">Google</a>.
The next step is to include the jQuery library in the head of your document, then use a few lines of code to find the a tags that have been marked as external.
<script src="/js/jquery.packed.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('a.external_link').click( function() {
window.open(this.href);
return false;
});
});
</script>
I will step through this one line at a time.
$(document).ready( function () {
In this first line, the document is wrapped in a jQuery object. The "ready" method of the jQuery object is called and we pass, as it's only parameter, an anonymous function. The "ready" function is called as soon as the DOM is available. This is important, because we need to make sure all the anchor tags that are marked can be accessed before trying to operate on them. This is different than "window.onload" because it does not need to wait for all the resources (images, scripts, etc...) to load before it is safe to use. Once the DOM is "ready", the anonymous function is run.
$('a.external_link').click( function() {
This line finds all the anchor tags with a class of "external_link" and binds a "click" function to them. This event is fired when a DOM element matching the criteria encounters the "onclick" event. The click function is passed another anonymous function.
window.open(this.href);
A standard javascript window object method, the "open" method opens a URL (passed as it's paramter) in a new window. You can of course specify other parameters such as window size, toobar, window title, etc... But that is not needed for this particular implementation. The parameter passed as "this.href" is the value of the href attribute for the link that was clicked.
return false;
The last step is to prevent the browser from taking its standard action, which is to open the link inline in the current browser window. by specifying "return false;", we are squelching that behavior.
Shane
2008.06.16 | 08:03 AM
This is a great tip. Thanks for sharing this. I use jQuery for most everything and had not thought of using it to open external links in new tabs/windows. jQuery rocks. Cool.