What I have here is a JavaScript experiment that might be useful.
As we already know, target attribute for anchor tags in strict doctypes is not included.
But we also know that sometimes we want to open a page in another window.
If we're talking about all external pages, I might
have a solution that you can easily apply even to your old sites.
This script initiates on page load and goes through all links (anchor tags) in the document. It then checks links, and based on current domain name it recognizes them as internal or external. Furthermore, the script adds a class name "external" to all external links. That way you can visually separate them from internal links. The greatest thing about it is that it doesn't demand any markup interventions so you can use them on previous projects by simply plugging in the JavaScript function.
Take a look at the demo | Download Blankwin script
Here's the script. It can't get any simpler.
The script initiates on page load
this.blankwin = function(){
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
};
this.set = function(obj){
obj.target = "_blank";
obj.className = "external";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};
Karl Steltenpohl 7 Feb, 2008
Jeremy Hicks 7 Feb, 2008
Maybe I don't understand Strict Validation so much, but this script is essentially adding the target="_blank". Is the markup still considered 'strict' once that has been injected?
And for existing sites, some css backporting might be necessary if you've already styled the links, unless I'm not understanding something.
mginop 7 Feb, 2008
Davewood 7 Feb, 2008
Rather than using strict validation and this "workaround", why not be truthful and validate it as transitional and use the target attribute.
John 7 Feb, 2008
cssglobe 7 Feb, 2008
Btw, even in the working draft for Techniques for WCAG 2.0 there is a <a href="http://www.w3.org/TR/WCAG20-TECHS/SCR24.html">sample function</a>
cssglobe 7 Feb, 2008
This script is merely a demonstration, it gives developers a choice of using new windows for all external links if they want to.
CSSnewbie 7 Feb, 2008
Paul Sayre 7 Feb, 2008
But from a user stand point, I want full control over what is opened in what browser window and when. As a user, I would rather see a link of different color or see an icon rather then have my actions dictated by a developer.
That said, I really like the script. If you have chosen to get around strict and keep the functionality, this is a great way to do it. Keep up the good work, Alen!
cssglobe 7 Feb, 2008
This script is merely the tool, we should find the way to use it in a good way...
Cssnewbie noticed it well, the of the script "strength" is in its applicability. You can simply drop it on the document and it will work, no interventions in the code needed. How will you deliver that option to users is up to you.
kenman 8 Feb, 2008
1) Instead of attaching the script to the global JS object, it'd be better served wrapped in an anonymous structure so as to avoid global namespace collisions.
2) All modern browsers I believe support the lvl 1 DOM "links" collection, which I would presume would be considerably faster than getElementsByTagName().
3) You don't need all those this's.
4) The script WON'T "initiate on page load". It merely gets defined. You'd have to manually call blankwin(), and only sometime after the DOM is loaded.
My take:
(function(){
var hostname = window.location.hostname.replace("www.", "").toLowerCase();
var i = document.links.length;
while ( --i >= 0 ) {
var thisLink = document.links[i];
var thisHref = thisLink.href.toLowerCase();
if ( thisHref.indexOf("http://") != -1
&& thisHref.indexOf(hostname) == -1 )
{
thisLink.target = '_blank';
thisLink.className = 'external';
}
}
})();
kenman 8 Feb, 2008
I would still highly recommend using document.links.length though if your page is anything other than simple.
cssglobe 8 Feb, 2008
Mike 8 Feb, 2008
http://www.sitepoint.com/article/standards-compliant-world
cssglobe 8 Feb, 2008
It examines the value of the href attribute, compares is to current domain name, and if the domain name is different, it marks link as external. Plus, my script adds a class name on external links, something Kevin's script doesn't do at all. That class name can be used to visually separate external links.
Downside to Kevin's script is that you have to manually add rel="external" to each anchor tag you want to open in new window. Downside to mine is that you can't separate some external links from others.
Mike 8 Feb, 2008
naveed 12 Feb, 2008
Vincenzo 15 Feb, 2008
track40 18 Feb, 2008
This seems to work for me, and validates with XHTML Strict:
<a href="http://www.yourdomain.com" onclick="window.open(this.href,'newwin'); return false;">http://www.yourdomain.com</a>
Insert the: onclick="window.open(this.href,'newwin'); return false;" into your <a href>, and the link when clicked will spawn a new window.
Vitaly 19 Feb, 2008
Bad for SEO :(
noth 21 Feb, 2008
Yo tengo creado un plugin para jquery que hace eso mismo, y además una serie de funcionalidades más , lo podeís probar y descargar en http://www.noth.es/2007/11/24/actualizacion-del-jquery-link-version-03/
Demo
http://www.noth.es/jquery/mis_plugins/jqueryLinks-0-3-by-noth/
Saludos
Faisal 25 Feb, 2008
but i have a question, with AdSense ads, will it open in a new window?
i actually don't want the AdSense ads to open in a new window, because its against google TOS.
i couldn't test it, because i dont want to click my own ads.
thanks
chad 29 Feb, 2008
Miller Medeiros 15 Apr, 2008
also instead of just setting the className to "external" you should append it.. because if some external link already have a class it will be replaced after the script runs.. it should be [ obj.className += " external"; ]
i also suggest compressing the javascript and put in the zip file a compressed JS and an uncompressed file (source)..
thanks for sharing your knowledge with the community, your blog have some very nice tips.. keep your good work..
cheers..
Martin 16 Apr, 2008
salvia 6 Jun, 2008
Salvia 10 Jun, 2008
It's suprising the number of people who still think the target attribute of the anchor tag is valid xhtml. :)
Katrine Roof (Watson) 14 Jun, 2008
It's a good idea to show to user when links are external and when they will be opened in a new windows.
Volfgang Stropila 14 Jun, 2008
Nick Stars 9 Jul, 2008
Stephan Kockmann 19 Jul, 2008
thank you for the great script!
@Faisal: If you do not want to open AdSense-Links in a new window, you can treat them like an internal link by changing this line of code:
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
to this:
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1 && href.indexOf("googlesyndication.com")==-1) ? true : false;
If you have further links you do not want to open in a new window, you can add them like this:
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1 && href.indexOf("googlesyndication.com")==-1 && href.indexOf("...")==-1) ? true : false;
Just replace the "..." by a unique part of domain-name for the links to exclude.
Maybe there is even a better way to solve this "problem"? Suggestions are welcome!
Stephan
redking 26 Jul, 2008
how about opening external links in a predefined frame ? where all external links opens in a frame page,(2 frames) where top flame informs that the visitor is on the external site & bottom frame is the external site.
looking forward...
Clayton Narcis 5 Aug, 2008
anoop 6 Aug, 2008
It works for most of the things except Google adsense area and ajax based RSS feed section. Could you provide necessary code to make it fit also for ajax based RSS feed block?
thanks very much in advance.
C. Sundsdal 8 Aug, 2008
thanks x 10
Louis Lazaris 18 Aug, 2008
"Sure, the page will validate against the HTML 4.0 Strict and XHTML 1.0 Strict Document Type Definitions, but aren't we technically cheating?
The answer is no. The Document Object Model (DOM), which governs the document objects and attributes that are available to JavaScript code, is a totally separate standard from (X)HTML. Also consider that the DOM 2.0 standard that was published in January 2003 (well after XHTML 1.0, let alone HTML 4.0) still includes this attribute. It seems clear that while this attribute is slated to be phased out of (X)HTML, it will be available to JavaScript through the DOM for the foreseeable future."
Moses Adrien 17 Dec, 2008
$(document).ready(function(){
$('#content_area_middle a[href^="http://"]').addClass('external').attr("target", "_blank");
$('#content_area_middle a[href^="https://"]').addClass('external').attr("target", "_blank");
});
Jacob Halton 21 Dec, 2008
I need a code that can work like a class, where I just apply it to a link and it'll open in a new window, without creating a function for each link, there will be over 50 of them...
Is this something that can do that? I'm really new at javascript so I don't know if I'm using this thing right, it looks like it's supposed to make ALL the A tags popup, but it's not working when I use it.
Anybody want to help? email: jhaltondesign@hotmail.com
tarun kumar 24 Dec, 2008
Dangerell 11 Jan, 2009
Poppoll 20 Feb, 2009
I don't want the icon in this case.
Steve 25 Feb, 2009
I have tried... using this script in the parent file, but it doesn't affect the iframe content... and I cannot include it in the html files shown in the iframe as these are updated each day.
Any ideas?
thanks
s
Bob 2 Apr, 2009
Thanks!
Richard Phung 24 Apr, 2009
wow.. thank you so much.
Brian 19 Jun, 2009