Html Button Opening Link in New Tab

Html Button Opening Link in New Tab

So this is the simple code for the button to open a certain link

                <button class="btn btn-success" onclick="location.href='"> Google</button>

but it opens it on the same page, I want the link to open on a new tab though.

0

11 Answers

You can use the following.

window.open(
  '
  '_blank' // <- This is what makes it open in a new window.
);

in HTML

 <button class="btn btn-success" onclick=" window.open(')"> Google</button>

plunkr

With Bootstrap you can use an anchor like a button.

<a class="btn btn-success" href="" target="_blank">Google</a>

And use target="_blank" to open the link in a new tab.

1

You can also add this to your form:

<form action="" target="_blank">

Try using below code:

<button title="button title" class="action primary tocart" onclick=" window.open(' '_blank'); return false;">Google</button>

Here, the window.open with _blank as second argument of window.open function will open the link in new tab.

And by the use of return false we can remove/cancel the default behavior of the button like submit.

For more detail and live example, click here

To open a new tab with a button you just have to choose any of these options:

  • Open link in a new tab hmtl:
<a href="" target="_blank">The Website Linked</a>
  • Button open link in new tab:
<button class="btn btn-success" onclick=" window.open(')"> Google</button>
  • Open new tab when clicking link html:
<!-- add target="_blank" to open new tab when link is clicked [in HTML]-->
<a href="YourLink" target="_blank">YourText</a>

Use '_blank'. It will not only open the link in a new tab but the state of the original webpage will also remain unaffected.

Try this

window.open(urlValue, "_system", "location=yes");

Try this code.

<input type="button" value="Open Window"
onclick="window.open(')">

If you're in pug:

html
    head
        title Pug
    body
        a(href="" target="_blank") Example
        button(onclick="window.open(')") Example

And if you're puggin' Semantic UI:

html
    head
        title Pug
        link(rel='stylesheet' href=')
    body
        .ui.center.aligned.container
            a(href="" target="_blank") Example
        .ui.center.aligned.container
           .ui.large.grey.button(onclick="window.open(')") Example

This worked for me.

onClick={() => {window.open(');}}

In end of the form button can be added like this using target="_blank"

<a href= {{$example->hosted_example_url }} class="button" target="_blank">View</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Alexander Ross
Author

Alexander Ross

Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.