NARGA

  • Home
  • Categories
    • Articles
    • jQuery
    • CSS
    • How-to
    • Inspiration
    • Productivity
    • General
  • Freebies
  • WordPress
    • NARGA WordPress Library
You are here: Home / How-to / How to Open All External Links in a New Window/Tabs by using jquery

How to Open All External Links in a New Window/Tabs by using jquery

How-to, jQuery Last Updated on January 21, 2010 Leave a Comment

Do you ever know the way to open an external link in a new windows or tabs is one of The Top Ten Web Design Mistakes of 1999?

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).
Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user’s machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites.

I discovered right away is that the <a> tag does not allow the target attribute in XHTML Strict (nor does it in HTML Strict).

External Links
Open external links

However, the behavior of &#060;a target="_blank"'&#062; can be replicated in XHTML Strict with semantic markup and scripting.
If you know anything about attribute selectors, that should look familiar to you. Basically, it is saying, apply the attribute target="_blank" to all links that begin with http. I have written a few lines of jQuery code that will convert all external links (i.e. links that begin with http) to links opening up in a new window by injecting the &#060;a target="_blank"'&#062; behind the screens. I’m going to make sure you have jQuery active on your site, you can do this easily in WordPress, since it’s bundled with the latest installations.

//	Open external links in new windows using jquery
	$('a[href^="http://"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).attr('target', '_blank');

Really easy, really powerful, problem solved.

Related

Tagged: code recipes

About NARGA Editorial

The author avatar

NARGA.NET is a website (blog) about web development, graphic and WordPress related. Do you interesting with our website to post your own post or place your advertise? Contact us now!

Follow me:

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Highly Recommended

Divi 3 is the Ultimate Multi-Purpose Theme

Divi 3.0 – Best Drag Drop WordPress Theme, FREE Layout Kits

As you known, Divi is a "flag-ship" WordPress of Elegant Themes because it's named as Multi-Purpose … Read More...

Woocommerce Visual Attributes & Options Swatches

10 WordPress Plugins to Improve WooCommerce Product Variations

There are several WordPress plugins for WooCommerce to Improve WooCommerce Product Variations … Read More...

HandHeld Mobile Plugin

3 Fantastic Plugins to Optimize WordPress Mobile Friendly

In 2009, I listed some WordPress plugins to make your website mobile friendly. Just over 6 years and … Read More...

WooCommerce JetPack

Powerfull WordPress Plugins to Enhance WooCommerce Functions

WordPress and WooCommerce are free, you don’t have to spend anything to build your own web store and … Read More...

WooCommerce PDF Invoice

Top 7 WordPress Plugins to Invoice Your Clients

There are dozens of WordPress invoice plugins which you can use to turn WordPress into an excellent … Read More...

About NARGA.NET

NARGA is a blog dedicated to share top quality open source resources for web developer and web designer weekly (then daily asap). As a web designer or developer, you’ll find some of the best free icons, stock photos, fonts, free WordPress themes, userful WordPress plugins, best jQuery plugins, CSS3 snippets, HTML5 standard and a lot more …

Connect with Us

  • Write for Us
  • Follow us on Twitter
  • Become a Facebook Fan
  • Subscribe RSS Feed
  • Browser Post Archive
  • Terms & Conditions
  • Privacy Policy & Disclaimer
  • Contact NARGA

This site is licensed under Attribution-NonCommercial-ShareAlike 3.0 license. Feel free to change, reuse modify and extend it. Some authors will retain their copyright on certain articles.
NARGA.NET utilizes affiliate links and may receive a comission if you click an affiliate link and make a purchase.

  • Archives
  • Contribute
  • Terms & Conditions
  • Contact NARGA
Copyright © 2019 · NARGA GPRESS - All rights reserved. Proudly powered by Digital Ocean · Genesis Framework · WordPress · Log in