Javascript - 通过单击按钮在新选项卡中打开给定的 URL

Posted 2023-03-06

【中文标题】Javascript - 通过单击按钮在新选项卡中打开给定的 URL

【英文标题】：Javascript - Open a given URL in a new tab by clicking a button

【发布时间】：2011-09-12 08:03:44

【问题描述】：

我想要一个重定向到给定 URL 并在新选项卡中打开的按钮。如何做到这一点？

【参考方案1】：

你不能。此行为仅适用于插件，并且只能由用户配置。

【参考方案2】：

使用window.open 而不是window.location 打开新窗口或标签（取决于浏览器设置）。

您的小提琴不起作用，因为没有可供选择的 button 元素。试试input[type=button] 或给按钮一个id 并使用#buttonId。

【参考方案3】：

添加 target="_blank" 应该可以：

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

【讨论】：

我明白了，抱歉我错过了。好吧，您可以将链接的样式设置为看起来和感觉像一个按钮。如果您使用 jQuery UI，只需使用 button 即可。

对于我们绝大多数只涉足网页设计的人来说，这是一个很好的解决方案！谢谢！

+1，因为如果他们不使用按钮，您为那些寻找简单的“在新标签中打开链接”答案的人提供了一个很好的解决方案。

正是我想要的。谢谢

+1，如果某些东西在新标签页中打开一个页面，它在逻辑上是一个链接，所以<a>标签是合适的。应该使用样式使它看起来像一个按钮。

【参考方案4】：

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

此按钮看起来像一个 URL，可以在新标签页中打开。

【讨论】：

你需要添加“表格”

让一个按钮表现得像一个链接并不是一个好主意（从语义上讲）。相反，请使用 a 标签。

【参考方案5】：

使用这个：

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

为我工作，它将打开一个实际的新“弹出”窗口，而不是一个新的完整浏览器或选项卡。您还可以向其添加变量以阻止其显示特定的浏览器特征，如下所示：

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"

【讨论】：

@wong2 可能想改变这个答案。当前选择的那一个太罗嗦了。

【参考方案6】：

使用此代码

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 在 Mozilla、IE 和 chrome on 以及低于 22 的版本中运行良好；但在 Opera 和 Safari 中不起作用。

【讨论】：

这不是最好的答案！实心-1。

使用这个代码并不是一个真正的答案，你没有它背后的动机。

【参考方案7】：

我刚刚在表单标签下使用了 target="_blank"，它在 FF 和 Chrome 中运行良好，在新标签中打开，但在 IE 中它在新窗口中打开。

【讨论】：

标签或窗口是否打开取决于用户的浏览器选项。我不知道IE，但是在大多数浏览器中，网页无法选择链接是在选项卡中打开还是在窗口中打开，但用户可以配置它。

【参考方案8】：

您可以忘记使用 javascript，因为浏览器控制着它是否在新标签页中打开。您最好的选择是执行以下操作：

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

由于target="_blank" 属性，无论客户端使用哪种浏览器，这将始终在新选项卡中打开。

如果您只需要在不使用动态参数的情况下进行重定向，您可以按照 Tim Büthe 的建议使用带有 target="_blank" 属性的链接。

【讨论】：

按要求工作（在 chrome、firefox、IE10 上测试）:)

【参考方案9】：

试试这个 html：

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

【参考方案10】：

在javascript中你可以这样做：

window.open(url, "_blank");

【参考方案11】：

我的首选方法的优点是您的标记中没有嵌入 JavaScript：

CSS

a 
  color: inherit;
  text-decoration: none;

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>

【讨论】：

好吧，我想我有一个新的首选方法。

我认为这个问题更正确地回答了这个问题。 +1 :)

【参考方案12】：

使用 javascript 在新标签页中打开

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

【参考方案13】：

试试这个

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