Using JQuery To Open External Links In A New Window

19th February 2010 - 3 minutes read time

Opening external links in a new window can be useful, but adding target="_blank" can be a real chore. Not only that, but if you are trying to validate the page to XHTML strict then the target attribute will cause errors to appear as it is not defined in XHTML.

An easy solution to this issue is to add the following JQuery to your site. It will look for any links that start with http and do not contain the current domain and add a new click event to them that causes a new window to be opened. This will exclude most links straight away as they will most likely be relative.

$("a[href^='http']:not([href*='example.com'])").click(function(){
 window.open(this.href);
 return false;
}).attr("title", "Opens in a new window");

This code will also add a new title to each link, replacing any that already exist, just remove the call to attr() at the end of the block to stop this. If you are using this on your site then make sure you put this into a dom ready block, and also that you change the example.com to be your own domain name.

JavaScript

Comments

Thank you for taking the time to provide such a great snippet! I was wondering what would need to be added to this code to set the height and width of this new pop up window? Much appreciated!!

Submitted by Anonymous on Mon, 10/11/2010 - 17:52

Permalink

This is a pretty good resource:
Window open() Method

So, in adapting the above snippet you would get:

$("a[href^='http']:not([href*='example.com'])").click(function(){
 window.open(this.href,'','width=200,height=100');
 return false;
}).attr("title", "Opens in a new window");
Philip Norton

Submitted by giHlZp8M8D on Mon, 10/11/2010 - 20:38

Permalink

I like to use the following:

$("a[href*='http://']:not([href*='"+location.hostname.replace("www.","")+"'])").each(function() {
        //do some 'stuff' to the external link
    });

I also like to add an external class to the link for styling and also use:

$(this).click(function(event) {
        window.open(this.href, '_blank');
});

Full code and examples at:
jquery external links in new window

Submitted by Unseen Revolution on Thu, 09/22/2011 - 22:21

Permalink
$(function(){ $("a[href^='http']:not([href^='http://'+window.location.hostname.toLowerCase()])").attr({target: "_blank", title: $(this).attr('title')+" - this link will be open in a new window" }).append(' [^]'); });

Submitted by Alireza on Mon, 10/03/2011 - 05:38

Permalink

thank u very muchhhhhhhh

it's help me

Submitted by mojgan on Sat, 12/31/2011 - 08:04

Permalink
is this method still operational in 2017?

Submitted by ordenadores Madrid on Thu, 09/07/2017 - 10:13

Permalink

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
2 + 2 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Related Content

Creating A Simple Pie Chart With CSS

25th December 2022

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

Read more

Getting Up And Running With Nightwatch.js

24th July 2022

Nightwatch.js is an end to end testing framework, written in JavaScript. It can be used to test websites and applications and uses the W3C WebDriver API to drive modern browsers to perform the tests.

In this article I will look at setting up Nightwatch.js in a project and getting started with writing tests.

Read more

Creating Presentations In Markdown With Marp

15th May 2022

Marp or Markdown Presentation Ecosystem is a collection of tools that allows the generation of presentations of different formats from a markdown template. The tools are written in JavaScript and have a number of options that allow presentations of different styles and formats.

Read more