新标签中的HTML按钮打开链接

Question

所以这是按钮打开某个链接的简单代码

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

但它在同一页面上打开它,我希望链接在新选项卡上打开.

Answer 1

您可以使用以下内容.

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

在HTML中

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

plunkr

Answer 2

您还可以将其添加到表单中：

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

Answer 3

通过Bootstrap，您可以像按钮一样使用锚点。

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

并用于target="_blank"在新标签页中打开链接。

Answer 4

要使用按钮打开新选项卡，您只需选择以下任一选项：

• 在新选项卡中打开链接 hmtl：

<a href="https://insert.url" target="_blank">The Website Linked</a>

• 按钮在新选项卡中打开链接：

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

• 单击链接 html 时打开新选项卡：

<!-- add target="_blank" to open new tab when link is clicked [in HTML]-->
<a href="YourLink" target="_blank">YourText</a>

Answer 5

尝试使用以下代码：

<button title="button title" class="action primary tocart" onclick=" window.open('http://www.google.com', '_blank'); return false;">Google</button>

在这里，window.open以_blank作为第二个参数的window.open功能将打开新的标签页的链接。

通过使用return false我们可以删除/取消按钮的默认行为，如提交。

有关更多详细信息和现场示例，请单击此处