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

Posted 2023-03-05

【中文标题】新标签页中的 HTML 按钮打开链接

【英文标题】：HTML button opening link in new tab

【发布时间】：2016-03-09 00:16:58

【问题描述】：

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

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

但它在同一页面上打开它，但我希望链接在新标签上打开。

【参考方案1】：

您可以使用以下内容。

window.open(
  'https://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

【参考方案2】：

试试这个

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

【参考方案3】：

使用“_blank”。它不仅会在新标签页中打开链接，而且原始网页的状态也不会受到影响。

【参考方案4】：

借助 Bootstrap，您可以像按钮一样使用锚点。

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

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

【参考方案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，我们可以删除/取消按钮的默认行为，如提交。

如需更多详细信息和实时示例，请click here

【参考方案6】：

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

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

【参考方案7】：

试试这个代码。

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

【参考方案8】：

如果你在哈巴狗：

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

如果你正在学习语义 UI：

html
    head
        title Pug
        link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3/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

【参考方案9】：

这对我有用。

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

【参考方案10】：

要使用按钮打开新标签，您只需选择以下任何选项：

在新选项卡 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>