Using JavaScript to open links (absolute URLs only)

Question

I'd like links within a website to open as normal when they take you within the website (navigation, internal page linking) but any links to an external source to open in a new window.

Putting target="_blank" in the HTML isn't an option any more as webkit browsers ignore this so I need to use JavaScript.

How would I use JS to open all absolute URLs on a page in a new window and leave all relative URLs as they are? (This is the method I'd use to distinguish the two.)

I guess it'll be an expanded version of:

onclick="window.open(''); return false;"

But the rest is beyond me…

I'd prefer to avoid using a class or id (in fact, an id wouldn't be possible due to CMS constraints) as I'd prefer to keep the markup as minimal and semantic as possible.

Instead of forcing links to open in a new window, let the user decide. You'll have more issues with window.open() since modern browsers block popups by default. — jrummell
– jrummell, Commented Mar 26, 2012 at 20:08
I wish I could. I usually do, but my client's client (don't ask!) is adamant. I've already explained why target="_blank" isn't great and that support for it has been dropped. The pop-up thing would make a lot of sense too. Thanks. Is there a way a browser wouldn't treat it as a pop-up? Maybe a different command? — Martin
– Martin, Commented Mar 26, 2012 at 20:26
Not that I'm aware. This is part of web development, being limited by the capabilities of the client's browser. I'd recommend explaining why browsers don't make it easy to show popups (i.e. users hate them) and don't implement it, if possible. — jrummell
– jrummell, Commented Mar 26, 2012 at 20:28
The pop-up issue will add weight to my argument. Thanks for the nudge : ) — Martin
– Martin, Commented Mar 26, 2012 at 20:37

Darius · Accepted Answer · 2016-11-29 00:18:27Z

3

The selector filters the external link. By clicking a new window will be opened.

<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 <!-- Here is your site content -->
 <script>
 $(document).ready(function() {
   $('a[href^="http://"]').on('click', function(e) {
     e.preventDefault();
     window.open($(this).attr('href'), '_new');
   });
 });
 </script>
</body>
</html>

Further you can use the following snippet:

$('a').on('click', function(e) {
    e.preventDefault();
    var domain = 'http://example.com',
        url = $(this).attr('href'),
        target = '_top';
    if (this.href.indexOf(domain) !== 0) {
        target = '_new';
    }
    window.open(url, target);
});

edited Nov 29, 2016 at 0:18

answered Mar 26, 2012 at 20:07

Darius

12.4k2 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Martin Over a year ago

Thanks Darius. How would I work that onto my page? Just inside some <script> tags in the head?

Darius Over a year ago

I edited my first comment. Thats the basic form to use jQuery.

Martin Over a year ago

I've done that and it's not taking. I'm using jQuery 1.6.2 but that can't be it, can it? Here's the page so you can have a look at my source: tempertemper.net/portfolio.php

Darius Over a year ago

Okay, that's the problem. jQuery 1.6.2 doesn't support the 'on' method. So you have to type that: $('a[href^="http://"]').click( function(event){ ... I hope, that jQuery 1.6.2 supports that kind of selector. Test it.

Martin Over a year ago

Thanks Darius- I updated jQuery and it's liking it! So if it's an internal link (either relative URL or with an absolute URL beginning with the same website's address) it doesn't open the link in a new window. If it's an external link it does! Brilliant! Thanks for your help : )

|

Halcyon · Accepted Answer · 2012-03-26 19:56:00Z

2

Something like:

var domain = "http://example.com";
$("a").onclick(function () {
    if (this.href.indexOf(domain) !== 0) {
        window.open(this.href);
        return false;
    }
    return true;
});

It will attach an onclick handler to all <a> on the page. If the link looks like it's pointing to an external site: open a new windows instead and cancel the default click event (return false), if not, carry on (return true)

answered Mar 26, 2012 at 19:56

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

3 Comments

Martin Over a year ago

Thanks for your help. I'm having trouble getting it to work. Do I need to wrap it in a $(document).ready(function() { }); or something similar? I've placed it at the head of this page tempertemper.net/portfolio.php in case it's easier for you to see the code.

Halcyon Over a year ago

Yes. The code will run in-time at the top of the page you have no <a> yet, wrapping it in a $(document).ready will postpone execution until all the content has been loaded. If more content is loaded after the $(document).ready event, you'll need to apply this function again.

Martin Over a year ago

Sorry, you've lost me…! At the moment the script isn't working on my page. This is what I've put in the <head>

<script> $(document).ready(function() { var domain = "http://tempertemper.net"; $("a").onclick(function () {     if (this.href.indexOf(domain) !== 0) {         window.open(this.href);         return false;     }     return true; }); }); </script>

Collectives™ on Stack Overflow

Using JavaScript to open links (absolute URLs only)

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related