jQuery: go to URL with target="_blank"

Question

I am using this bit of jQuery code to get href of the link:

var url = $(this).attr('href');

-- and this bit of code to go to that href:

window.location = url;

Everything is just the way I want it, except the new page opens in the same window as the previous one, and I want it to open in a new window or tab (something that in plain html would have been achieved by using target="_blank" formula).

Question: How can I open the href in the new window or tab with jQuery?

Thank you for your help!

Christopher Armstrong · Accepted Answer · 2013-04-24 22:32:18Z

94

You need to open a new window:

window.open(url);

https://developer.mozilla.org/en-US/docs/DOM/window.open

edited Apr 24, 2013 at 22:32

answered Jul 13, 2011 at 2:37

Christopher Armstrong

7,9812 gold badges28 silver badges28 bronze badges

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

2 Comments

Dimitri Vorontzov Over a year ago

Thank you. That's just what I needed. Another quick question: is there a way to tell the browser to open a new tab rather than a new window?

Christopher Armstrong Over a year ago

I believe it depends upon how the browser is configured (i.e. a setting to open pop-ups in tabs or windows).

brenjt · Accepted Answer · 2015-07-21 14:35:17Z

76

Use,

var url = $(this).attr('href');
window.open(url, '_blank');

Update:the href is better off being retrieved with prop since it will return the full url and it's slightly faster.

var url = $(this).prop('href');

edited Jul 21, 2015 at 14:35

answered Jul 13, 2011 at 2:38

brenjt

16.3k14 gold badges80 silver badges120 bronze badges

Comments

defau1t · Accepted Answer · 2012-10-13 07:39:49Z

10

Question: How can I open the href in the new window or tab with jQuery?

var url = $(this).attr('href').attr('target','_blank');

answered Oct 13, 2012 at 7:39

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Comments

Abela · Accepted Answer · 2013-10-20 06:16:05Z

4

The .ready function is used to insert the attribute once the page has finished loading.

$(document).ready(function() {
     $("class name or id a.your class name").attr({"target" : "_blank"})
})

edited Oct 20, 2013 at 6:16

Abela

1,2333 gold badges19 silver badges42 bronze badges

answered May 16, 2013 at 10:42

Vidit Anjaria

1473 bronze badges

1 Comment

Nathan Wailes Over a year ago

Just a heads-up for future readers: I was using jQuery("a").prop("target", "_blank"); without enclosing it in $document.ready and it wasn't working in Chrome, but once I enclosed it in the $document.ready() call, it started working.

recurse · Accepted Answer · 2017-07-12 16:54:03Z

4

Detect if a target attribute was used and contains "_blank". For mobile devices that don't like "_blank", this is a reliable alternative.

    $('.someSelector').bind('touchend click', function() {

        var url = $('a', this).prop('href');
        var target = $('a', this).prop('target');

        if(url) {
            // # open in new window if "_blank" used
            if(target == '_blank') { 
                window.open(url, target);
            } else {
                window.location = url;
            }
        }           
    });

edited Jul 12, 2017 at 16:54

answered Oct 27, 2016 at 17:25

recurse

6346 silver badges15 bronze badges

Comments

aroth · Accepted Answer · 2011-07-13 02:40:39Z

1

If you want to create the popup window through jQuery then you'll need to use a plugin. This one seems like it will do what you want:

http://rip747.github.com/popupwindow/

Alternately, you can always use JavaScript's window.open function.

Note that with either approach, the new window must be opened in response to user input/action (so for instance, a click on a link or button). Otherwise the browser's popup blocker will just block the popup.

answered Jul 13, 2011 at 2:40

aroth

54.9k22 gold badges142 silver badges178 bronze badges

1 Comment

Dimitri Vorontzov Over a year ago

Thank you. No, not a pop-up. Just a normal window. Normally I would just let html do the job, but a prior bit of code I use in the same menu disables the default behavior for all the links.

Yogesh Prajapati · Accepted Answer · 2014-10-14 12:35:10Z

0

Try using the following code.

$(document).ready(function(){
    $("a[@href^='http']").attr('target','_blank');
});

edited Oct 14, 2014 at 12:35

Yogesh Prajapati

4,8682 gold badges40 silver badges77 bronze badges

answered Oct 14, 2014 at 12:15

Lähîrü

11 bronze badge

Comments

Mahdi Porkar · Accepted Answer · 2021-10-11 09:45:40Z

0

 url='/controller/action';  
 window.open(location.origin+url,'_blank');

answered Oct 11, 2021 at 9:45

Mahdi Porkar

2192 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery: go to URL with target="_blank"

8 Answers 8

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related