Replacing target=”_blank” for Strict XHTML using JQuery (redux)
Some time ago, I provided a simple JQuery solution for replacing target="_blank" when writing Strict XHTML. However, one commenter recently pointed out that my solution does not work if the rel attribute contains more than one value e.g. rel="external nofollow"
Well, JQuery to the rescue again. A very slight modification to the Attribute Filter fixes this issue. The code now reads:
$(function() {
$('a[rel*=external]').click( function() {
window.open(this.href);
return false;
});
});
Notice the asterisk. This matches attributes that contain a certain value, as explained in the JQuery docs.
However, this isn’t the full redux. Thanks to the power of JQuery, we can identify external links without the need for the rel="external" attribute at all.
Assuming that all internal links are relative e.g. href="/contact", we can simply search for all hyperlinks whose anchor contains a fully qualified url, or more precisely starts with http e.g. href="http://some.site.com".
The final code now looks like this:
$(function() {
$('a[href^=http]').click( function() {
window.open(this.href);
return false;
});
});
And that’s the power of JQuery
cobasa commented on 
Erik commented on 
There is one potential pitfall here, and that is if you site generates complete URLs, or if you use a complete URL to switch to HTTPS/HTTP. My only other recommendation would be to use “*=://” instead, as that would capture non-http(s) links as well. However, that be _less_ correct than your method, depending on what other types of resources you link to (RSS, for example).
forgive my ignorance but what does rel external do? Am I right to assume that it signals that the link is to an external site but does that mean that the browser is supposed to respect the links and open in a new window. I’m guessing not. So if a customer wants those links to open in a new window this javascript will allow that. How do you cater for people without javascript? Or is this just something that you cannot implement for non js users if you adhere to the strict DTD?
@Alun, A few good questions there. Without javascript, or web browser preferences, Strict DTDs do not allow links to be opened in a new window, as this is seen as an event i.e. not part of the document structure.
rel=”external” doesn’t actually do anything. The rel attribute defines the ‘link type’. According to the W3C Spec:
‘User agents, search engines, etc. may interpret these link types in a variety of ways. For example, user agents may provide access to linked documents through a navigation bar.’
There is a list of recognised link types, such as stylesheet. ‘external’ is not a recognised link type.
http://www.w3.org/TR/REC-html40/types.html#type-links
I bet some of the new browsers will soon offer the facility to identify such links though.
[...] second solution I came across fixed some of the issues of the first by re‐writing the regex to account for [...]
Another possible attribute name is
xlink:show=”new”
from the XLink spec.
This will search your entire page for external links and make them open in a new window. Try it out!
$(function() {
$(“a[href*='http://']:not([href*='"+location.hostname+"'])”).click( function() {
window.open(this.href);
return false;
});
});
Man, that is sweet. Thanks!
This is my favorite solution to this problem, because it uses JQuery, and doesn’t assume the XHTML capable browser has implemented HTML4 “target” attribute on links.
Remember – if you happen to generate an external link or two dynamically after the page loads, the new link won’t “pop” into a new window – unless you bind the click event to the external links with live().
$(‘a[rel*=external]‘).live(‘click’, function(){
window.open($(this).attr(‘href’));
return false;
});
This ensures that any new elements are bound to the modified click event, too.
I find this nice way to do it:
$(“a[rel*=external]“).attr( “target”, “_blank” );
It’s valid, since target is still an attribute in the DOM definition.
If you don’t want to use _target at all (cause it is kinda cheating, isn’t it?), this is what I did:
$(“a.pdf”).mouseover(function() {
pdfLink = this.href;
$(this).attr(“href”,”#”);
});
$(“a.pdf”).click(function() { window.open(pdfLink); });
$(“a.pdf”).mouseout(function() {
$(this).attr(“href”,pdfLink);
pdfLink = “”;
});
You pick your target (for me, it was things that linked out to PDFs, so I had a class called ‘pdf’). On mouseover, you put the href into a variable, you strip the href from the tag so that the link doesn’t open in the parent window as well. On click, you open that variable in the new window. On mouseout, put the variable back in the href.
Since we’re using JavaScript anyways, it’s a solution that avoids _target completely, and it allows for a functioning link if the user has JavaScript turned off.
Hope it helps someone!
Cheers,
Brendan
$(document).ready(function(){
$(‘a[rel*=external]‘).click(function(){
this.target= “_blank”;
});
@ Frank
The live() method has some flaws so you might need to use delegate() when working with arrays of elements like this:
$(‘.storycontent’).delegate(“a[href*='http://']:not([href*='"+location.hostname+"'])”, ‘click’, function() {
window.open($(this).attr(‘href’));
return false;
});