Using JQuery To Open External Links In A New Window

19th February 2010 - 2 minutes read time

Note: This post is over a year old and so the information contained here might be out of date. If you do spot something please leave a comment and we will endeavour to correct.

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

Permalink

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!!

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");

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

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(' [^]');
});

Permalink

thank u very muchhhhhhhh

it's help me

Permalink

is this method still operational in 2017?

Add new comment

Related Content

Using Shadow DOM

When I first heard the term "Shadow DOM" I had to laugh at the name. I had visions of a cloak and dagger HTML element that would only be seen on the dark web. Or some sort of nefarious shadow site that was the after effect of a hack. In reality, this is quite a useful bit of technology that has a number of applications, although it does need a fairly modern browser to be able to use it. Shadow DOM is part of the web components strategy, which includes custom elements and HTML templates. These give developers the power to create custom tools and experiences that are encapsulated away from other parts of the code. In this article I will go though what the shadow DOM is, how to use it, and in what situations it comes in handy.

Simple Horizontal Segmented Bar Chart With CSS

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

Inspecting And Reusing jQuery Events

Adding events to HTML elements with jQuery is pretty simple, but I found that extending those events wasn't an easy task. I was faced with an issue where I had some third party code that performed an action on an element, and I needed to add an event and call the same handler from that event. As this was within a CMS I had limited scope to just add my new event to the existing code, so I needed a way of pulling out the current jQuery events and then calling that event handler separately. This post looks at how I accomplished this.

Langton's Ant In JavaScript

After looking at Conway's game of life I have been looking at other forms of cellular automata. This lead me to discover Langton's ant, which is a different kind of cellular automata where an agent (namely an ant) is used to turn the squares on or off as it travels around a grid.

The rules of Langton's ant are quite simple. The ant simply follows two rules as it moves around the grid.

Adventures In FizzBuzz

Tests for programmers in an interview process are not uncommon. For the last couple of years I have asked a quick pre-interview question to junior developers to see what sort of stuff they come up with.

As I don't want to set any developer a task that will take longer than absolutely needed I opted to set a very simple task for them. Commonly known as "FizzBuzz", this task is as follows.

Checking If An Element Exists In jQuery

To verify that an element exists in the DOM you just need to use the .length property of a jQuery lookup. If the element is there then the number of elements found will be greater than 0.