Javascript-单击按钮在新标签页中打开给定URL


109

我想有一个重定向到给定URL并在新标签页中打开的按钮。如何才能做到这一点?

Answers:


143

用这个:

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

2
@ wong2可能想更改对此答案。当前选择的那个要有效得多。
CSS

54

在javascript中,您可以执行以下操作:

window.open(url, "_blank");

29

添加target =“ _ blank”应该可以:

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

3
我知道了,很抱歉我错过了。好了,您可以设置链接的外观,使其看起来像一个按钮。如果您使用的是jQuery UI,则只需使用按钮即可。
TimBüthe2011年

1
对于绝大多数只涉足网页设计的人来说,这是一个极好的解决方案!谢谢!
SMBiggs

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

正是我想要的。谢谢
Shahrukh Anwar

+1,如果在新标签页中打开了某个页面,则从逻辑上讲它是一个链接,因此<a>标记是适当的。应该使用样式使它看起来像一个按钮。
科斯(Kos)'18年

21

您可能会忘记使用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"属性是什么,客户端使用的浏览器都将始终在新选项卡中打开。

如果您只需要没有动态参数的重定向,则可以使用target="_blank"TimBüthe建议的带有属性的链接。


1
按要求工作(在chrome,firefox,IE10上测试):)
Zeeshan

10

使用window.open代替window.location打开新的窗口或选项卡(取决于浏览器设置)。

您的小提琴无法正常工作,因为没有button可供选择的元素。尝试input[type=button]或给按钮一个id并使用#buttonId


10

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

的CSS

a {
  color: inherit;
  text-decoration: none;
}

的HTML

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

好吧,我想我有一个新的首选方法。
露背装

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


1

我只是在form标记下使用了target =“ _ blank”,它在FF和Chrome上可以正常工作,在FF和Chrome上可以在新标记中打开,而在IE中可以在新窗口中打开。


1
是否打开选项卡或窗口由用户的浏览器选项确定。我不了解IE,但是在大多数浏览器中,网页无法选择是在选项卡还是在窗口中打开链接,但用户可以对其进行配置。
joeytwiddle

0

试试这个

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

-1

试试这个HTML:

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

-5

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


-5
<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,可以在新标签页中打开。


您需要添加“表格”
nerkn 2014年

从表面上看,让按钮表现得像一个链接并不是一个好主意。而是使用a标记。
Henrique Schreiner

-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()
            }
    };

在Mozilla,IE和chrome以及低于22的版本上,IT都可以正常工作;但不适用于Opera和Safari。


2
这不是最佳答案!实心-1。
Shougo Makishima 2014年

1
使用此代码并不是真正的答案,您没有动力。
Edeph
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.