Javascript - Open a given URL in a new tab by clicking a button

Question

I would like to have a button that redirects to a given URL and opens in a new tab. How can this be done?

Luke Alderton · Accepted Answer · 2013-09-10T09:49:03.657

204

Use this:

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

Worked for me and it will open an actual new 'popup' window rather than a new full browser or tab. You can also add variables to it to stop it from showing specific browser traits as follows:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"

edited Sep 10 '13 at 09:49

answered Aug 20 '12 at 14:51

Luke Alderton

3,198
1
23
34

3

@wong2 Might want to change answer to this one. The one currently selected is far to wordy to be efficient. – CSS Sep 25 '15 at 23:02

score 116 · Answer 2 · answered Jan 10 '17 at 22:39

116

In javascript you can do:

window.open(url, "_blank");

answered Jan 10 '17 at 22:39

satnam

10,719
5
32
42

Tim Büthe · Answer 3 · 2011-06-10T09:10:18.893

45

Adding target="_blank" should do it:

<a id="myLink" href="www.google.com" target="_blank">google</a>

edited Jun 10 '11 at 09:10

answered Jun 10 '11 at 08:46

Tim Büthe

62,884
17
92
129

3

I see, sorry I've missed that. Well, you could style the link to look and feel like a button. If you're using jQuery UI just use [button](http://jqueryui.com/demos/button/) to do so. – Tim Büthe Jun 10 '11 at 09:12
1

Excellent solution for the vast majority of us who merely dabble in web design! Thank you! – SMBiggs Apr 04 '13 at 05:57
2

+1 because you gave a good solution to those looking for a simple "open link in new tab" answer, if they aren't using a button. – user295583058 Dec 10 '15 at 21:00
Exactly what I want. Thanks – Shahrukh Anwar Apr 15 '18 at 15:49
+1, if something opens a page in new tab, it is logically a link, so `` tag is appropriate. Styles should be used to make it look like a button. – Kos May 09 '18 at 06:41
There are a lot of VALID reasons on why you have to use a ` – Ahmad Maleki Jul 10 '18 at 08:01
Worked. Thanks a lot. – Geshan Ravindu Oct 25 '21 at 15:29

score 27 · Answer 4 · answered Sep 12 '13 at 14:20

You can forget about using JavaScript because the browser controls whether or not it opens in a new tab. Your best option is to do something like the following instead:

<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
    <input name="dynamicParam1" type="text"/>
    <input name="dynamicParam2" type="text" />
    <input type="submit" value="submit" />
</form>

This will always open in a new tab regardless of which browser a client uses due to the target="_blank" attribute.

If all you need is to redirect with no dynamic parameters you can use a link with the target="_blank" attribute as Tim Büthe suggests.

Works as required (tested on chrome, firefox, IE10) :) – Zeeshan Sep 14 '13 at 04:44 — Zeeshan, Sep 14 '13 at 04:44

swinn · Answer 5 · 2020-07-13T14:37:00.877

16

My preferred method has the advantage of no JavaScript embedded in your markup:

CSS

a {
  color: inherit;
  text-decoration: none;
}

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>

edited Jul 13 '20 at 14:37

answered Mar 29 '17 at 16:39

swinn

869
1
16
46

2

Well, I guess I have a new preferred method. – Halter May 16 '17 at 20:00
Prefer the `a input[type=button]` CSS selector instead of just `a` – RixTheTyrunt Jun 21 '22 at 17:09

score 12 · Answer 6 · answered Jun 10 '11 at 08:45

12

Use window.open instead of window.location to open a new window or tab (depending on browser settings).

Your fiddle does not work because there is no button element to select. Try input[type=button] or give the button an id and use #buttonId.

answered Jun 10 '11 at 08:45

James Allardice

164,175
21
332
312

score 7 · Answer 7 · answered May 09 '18 at 06:37

7

Open in new tab using javascript

 <button onclick="window.open('https://www.our-url.com')" id="myButton" 
 class="btn request-callback" >Explore More  </button>

answered May 09 '18 at 06:37

Siddharth Shukla

1,063
15
14

score 2 · Answer 8 · answered Jul 19 '13 at 03:33

2

I just used target="_blank" under form tag and it worked fine with FF and Chrome where it opens in a new tag but with IE it opens in a new window.

answered Jul 19 '13 at 03:33

Obaidul Hye

119
2
6

1

Whether a tab or window opens is determined by the user's browser options. I don't know about IE, but in most browsers the webpage cannot choose whether the link opens in a tab or a window, but the user can configure it. – joeytwiddle Feb 24 '14 at 07:12

score 1 · Answer 9 · answered Jul 10 '19 at 06:05

1

try this

<a id="link" href="www.gmail.com" target="_blank" >gmail</a>

answered Jul 10 '19 at 06:05

Love Kumar

1,056
9
10

Aun Shahbaz Awan · Answer 10 · 2023-08-05T06:18:19.797

0

In React or Javascript we can do:

<button onClick={() => window.open(url, "_blank")}> content </button>

To use an Anchor tag:

<a href="url" target="_blank" > content </a>

edited Aug 05 '23 at 06:18

answered Aug 05 '23 at 06:11

Aun Shahbaz Awan

559
7
10

You can also replace the button with a div or any other tag. – Aun Shahbaz Awan Aug 05 '23 at 06:19

score -1 · Answer 11 · answered Feb 03 '23 at 10:25

-1

Use button as anchor tag

<button
     target="_blank"
     rel="noreferrer"
     as="a"
     href="https://example.com"
   >
   Open
   </button>

answered Feb 03 '23 at 10:25

Hashmat Noorani

1

score -2 · Answer 12 · edited Jul 30 '16 at 02:55

-2

Try this HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>

edited Jul 30 '16 at 02:55

Jonathan Lam

16,831
17
68
94

answered May 23 '15 at 07:00

raj mori

13
1

score -6 · Answer 13 · answered Apr 19 '12 at 20:01

-6

<BUTTON NAME='my_button' VALUE=sequence_no TYPE='SUBMIT' style="background-color:transparent ; border:none; color:blue;" onclick="this.form.target='_blank';return true;"><u>open new page</u></BUTTON>

This button will look like a URL and can be opened in a new tab.

answered Apr 19 '12 at 20:01

Jolene

1

you need to add "form" – nerkn Jun 27 '14 at 14:29
It's not a good idea (semantically speaking) to have a button to behave like a link. Instead, use the `a` tag. – Henrique Schreiner Sep 19 '16 at 18:49

score -7 · Answer 14 · edited Nov 19 '12 at 11:22

-7

USE this code

function openBackWindow(url,popName){
        var popupWindow = window.open(url,popName,'scrollbars=1,height=650,width=1050');
          if($.browser.msie){
            popupWindow.blur();
            window.focus();
        }else{
           blurPopunder();
        }
      };

    function blurPopunder() {
            var winBlankPopup = window.open("about:blank");
            if (winBlankPopup) {
                winBlankPopup.focus();
                winBlankPopup.close()
            }
    };

IT works fine in Mozilla,IE and chrome on and less than 22 version; but doesn't work in Opera and Safari.

edited Nov 19 '12 at 11:22

akjoshi

15,374
13
103
121

answered Nov 19 '12 at 11:00

Lalit Guglani

46
3

2

This is not the best answer! Solid -1. – George Chalhoub Dec 05 '14 at 07:21
1

USe this code is not really an answer and you have no motivation behind it. – Edeph Apr 14 '15 at 09:18

score -7 · Answer 15 · answered Jun 10 '11 at 08:44

-7

You can't. This behaviour is only available for plugins and can only be configured by the user.

answered Jun 10 '11 at 08:44

ckruse

9,642
1
25
25

Javascript - Open a given URL in a new tab by clicking a button

15 Answers15

Linked

Related