HTML button opening link in new tab

HtmlWeb

Html Problem Overview


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

                <button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>

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

Html Solutions


Solution 1 - Html

You can use the following.

window.open(
  'https://google.com',
  '_blank' // <- This is what makes it open in a new window.
);

in HTML

 <button class="btn btn-success" onclick=" window.open('http://google.com','_blank')"> Google</button>

plunkr

Solution 2 - Html

With Bootstrap you can use an anchor like a button.

<a class="btn btn-success" href="https://www.google.com" target="_blank">Google</a>

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

Solution 3 - Html

You can also add this to your form:

<form action="https://www.google.com" target="_blank">

Solution 4 - Html

Try using below code:

<button title="button title" class="action primary tocart" onclick=" window.open('http://www.google.com', '_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

Solution 5 - Html

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

Solution 6 - Html

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="https://insert.url" target="_blank">The Website Linked</a>

  • Button open link in new tab:

<button class="btn btn-success" onclick=" window.open('http://google.com','_blank')"> 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>

Solution 7 - Html

Try this

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

Solution 8 - Html

Try this code.

<input type="button" value="Open Window"
onclick="window.open('http://www.google.com')">

Solution 9 - Html

If you're in pug:

html
    head
        title Pug
    body
        a(href="http://www.example.com" target="_blank") Example
        button(onclick="window.open('http://www.example.com')") Example

And if you're puggin' Semantic UI:

html
    head
        title Pug
        link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css')
    body
        .ui.center.aligned.container
            a(href="http://www.example.com" target="_blank") Example
        .ui.center.aligned.container
           .ui.large.grey.button(onclick="window.open('http://www.example.com')") Example

Solution 10 - Html

This worked for me.

onClick={() => {window.open('https://www.google.com/');}}

Solution 11 - Html

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRDRView Question on Stackoverflow
Solution 1 - HtmlngLoverView Answer on Stackoverflow
Solution 2 - HtmlEstevaoLuisView Answer on Stackoverflow
Solution 3 - HtmlPavel ChernikovView Answer on Stackoverflow
Solution 4 - HtmlAshish RajView Answer on Stackoverflow
Solution 5 - HtmlHarshwardhan SView Answer on Stackoverflow
Solution 6 - HtmlkardantelView Answer on Stackoverflow
Solution 7 - HtmlKrishnarajView Answer on Stackoverflow
Solution 8 - HtmlrushabhpathakView Answer on Stackoverflow
Solution 9 - HtmlYanay LehaviView Answer on Stackoverflow
Solution 10 - HtmlPrakhar SinghView Answer on Stackoverflow
Solution 11 - HtmlTharindu MarapanaView Answer on Stackoverflow