Stylin’ with CSS

The Blog and Books of Charles Wyke-Smith

Make External Links Open In New Windows

by Charles Wyke-Smith

Most Web sites offer links to other sites, but it’s generally good practice to open these “external” pages in a new window or tab. This makes it clear that the content is not part of your site, and also leaves your site open in the browser so the user can easily return.

View the External Links in New Window Demo Page

The way in which you can make a page open in a new window is to add the target attribute with a value of _blank (note the underscore), like this

<a href="http://www.someothersite.com" target="_blank">Some other site</a>

Not only is it tedious to have to go through your site and add the target="_blank" attribute to every external link, but also it's often not even feasible. Many sites today draw their content from databases, and your code has to handle whatever is served up, including links that may or may not be external.

However, for any external link to work, whether it opens in a new window or not, its URL must begin with “http://" or it doesn’t do anything; you can't just write

<a href="www.someothersite.com">Some other site</a>

You can use this fact to your advantage, as this gives you a means for your code to discern between internal links and external links—the external ones start with “http://”, whereas internal ones don’t.

Using jQuery to Open External Links in New Windows

By using a jQuery script that runs after the page has loaded, you can the test for the presence of http:// at the start of each link’s href, and if it is present, add the target attribute. Here’s how this is done.

Let’s start with a jQuery selector that selects all links with an href attribute that starts with http://.


$( 'a[href^="http://"]' )

Note the CSS-format attribute selector includes the ^ symbol that means “starts with’. Observe also that I am using single quotes around the selector text string, because part of that string is the double-quotes for the attribute value, and I don't want jQuery to get confused about where the string actually ends.

The next step is to chain onto this selector the code that adds the target attribute to all the selected links, like this

$( 'a[href^="http://"]' ).attr( 'target','_blank' )

All that's left to do is to wrap this code in a $(document).ready() function so that the DOM (Document Object Model—the browser's view of the HTML markup) is loaded into the browser before the script runs.


<script>
	$(document).ready(function() {
		$( 'a[href^="http://"]' ).attr( 'target','_blank' );
	});
</script>

Now, even if the script appears in the page before the related markup, it will not run until the markup has loaded and the DOM is ready.

As a final touch, it would be nice to indicate to the user that some links will open in new windows, so I will also add a class attribute with a value of external_link. Then I can use CSS to add some explanatory text after the links that will open in new windows. The complete jQuery and CSS code, ready to drop into the head of your page, looks like this


<script>
	$(document).ready(function() {
		$( 'a[href^="http://"]' )
			.attr( 'target','_blank' )
			.addClass( 'external_link' )
		;
	});
</script>

<style>
	.external_link::after {
		content:" opens in new window";
		color:#aaa;
		font-size:.75em;
	}
</style>

You can see that I have broken the jQuery over several lines for clarity, but the line breaks are not required. Note that I use the CSS pseudo-element ::after to insert the text after the link. I have styled that text gray and 75% the size of the link text.

If you only want certain external links to open in new windows, for example, only those within a div with the class useful_links, you can modify the jQuery selector to limit the effect of the script to links within that div, like this

$( 'div.useful_links a[href^="http://"]' )

Note the dot at the start of useful_links that indicates that it is a class name, just as you would in CSS.

Small touches like external links opening in new windows can add greatly to the overall user experience of your site, and also help to avoid users following the useful links that you provide to other sites and never coming back. Happy coding.

Categories

Tags

Leave a comment

More posts