Reputation: 35700

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

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

Upvotes: 165

Answers (16)

Adriano Silva Ribeiro

Reputation: 103

For anyone that is reading this post in 2024, you can try this:

    // Set the contract button to open the contract in a new tab
    mybutton.addEventListener('click', (event) => {
        event.preventDefault(); //to avoid changes the current page url
        window.open(myurl, '_blank');//the behavior is defined by the browser and user options
        return false;//It prevents the default action associated with the event
    });

Upvotes: 2

Aun Shahbaz Awan

Reputation: 775

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>

Upvotes: 1

Hashmat Noorani

Reputation: 11

Use button as anchor tag

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

Upvotes: 0

swinn

Reputation: 885

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>

Upvotes: 17

Love Kumar

Reputation: 1124

try this

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

Upvotes: 1

Siddharth Shukla

Reputation: 1131

Open in new tab using javascript

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

Upvotes: 8

satnam

Reputation: 11464

In javascript you can do:

window.open(url, "_blank");

Upvotes: 127

raj mori

Reputation: 13

Try this HTML:

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

Upvotes: -2

Tony

Reputation: 364

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.

Upvotes: 27

Luke Alderton

Reputation: 3296

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;"

Upvotes: 210

Obaidul Hye

Reputation: 119

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.

Upvotes: 2

Lalit Guglani

Reputation: 46

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.

Upvotes: -7

Jolene

Reputation: 1

<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.

Upvotes: -6

Tim Büthe

Reputation: 63734

Adding target="_blank" should do it:

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

Upvotes: 47

James Allardice

Reputation: 165941

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.

Upvotes: 12

ckruse

Reputation: 9740

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

Upvotes: -7

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

Answers (16)

Related Questions