Code Snippet
Open External Links In New Window
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});You can do this straight with HTML, but that is invalid markup, this takes care of business without invalid code and unnecessary markup.
Or, you can still avoid the validation problems and just append the class target=_blank thing to any links with href attributes starting with http://. The example below only targets links in a #content area. Scoping down like that might be a good idea in case your menus are dynamic and create full URLs.
$("#content a[href^='http://']").attr("target","_blank");Also note that there are a wide variety of different ways to only target external links.
A slightly different version if you only want to target specific URLs (I use the rel tag “external”):
$('A[rel="external"]')
.click( function() {
window.open( $(this).attr('href') );
return false;
});
Nice snippet Paul, that’s much better, and beautifully unobtrusive and validates in XHTML 1 strict. It’s about time the world stops using obtrusive javascript.
Thank you, Paul! This came in handy.
Is there a way to resize the window that pops up as well?
Nice solution
This is awesome. Just what I needed for a client’s website. And thanks Paul, that works wonderful.
Here is a snippet we’re using that works similar to Paul’s and adds support for target “_blank”, “parent”, “top” and “popup”
If code is garbled, grab it here: http://www.id3.co.th/js/lib.js (look for “links and popups”)
You then activate it in your pages by adding externallinks(); in your $(document).ready(function(){
If code is garbled, check the source of http://www.id3.co.th/ (look for “.ready(function”)
Hope this helps!
window.onload = externallinks; for nojquery situation
If you have a good reason for opening certain links in a new window and want to use plain HTML you could just switch to the HTML5 doctype.
It’s the little things in life! Small code, huge solution!
target=”_blank” and just forget about xhtml strict, that is dead by the way.
Everyone is talking about HTML5 now.. why do you waste your time with thes insignificant problems?
I agree with you, why bothering with scripts when we already have target”_blank”, moreover it also works for people with js is disabled! Maybe this isnt a concern anymore?
Because, even in 2010, people still don’t understand the role of validation. It’s a tool, not an achievement. Remember the compliance badge craze!?
if you’re using jquery, you should use delagate. that way, you create 1 event binding on the body element, instead of hundreds, one on each link.
code would look something like
$(‘body’).delegate(“a”,”click”,function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
if(!a.test(this.href)) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
}
});
Technically it’s a nice solution.
On the other hand it might tempt designers to use it whenever they can. NEVER open up a new window unless it is absolutely necessary or is a 100% user-friendly. Having all external links open up in a new window is neither.
For MooTools it’s very similar:
Good one. I think, this post describes good about it and a perfect solution too!!!
http://praveenbattula.blogspot.com/2010/06/open-all-anchor-links-in-new-window.html
Hi…
Can i have any code to popup an iframe content dynamically……..
Thanks
@nachomaans
How can I have copied the code you given to section .But I am not sure If I follow this line:You then activate it in your pages by adding externallinks(); in your $(document).ready(function(){
Where can I use it?
BTW I tried it in my wordpress blog