Javascript - Öffnen Sie eine bestimmte URL in einem neuen Tab, indem Sie auf eine Schaltfläche klicken

109

Ich hätte gerne eine Schaltfläche, die zu einer bestimmten URL umleitet und in einem neuen Tab geöffnet wird. Wie kann das gemacht werden?

wong2
quelle

Antworten:

142

Benutze das:

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

Hat für mich funktioniert und es öffnet sich ein neues Popup-Fenster anstelle eines neuen vollständigen Browsers oder Tabs. Sie können ihm auch Variablen hinzufügen, um zu verhindern, dass bestimmte Browsermerkmale wie folgt angezeigt werden:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"
Luke Alderton
quelle
2
@ wong2 Vielleicht möchten Sie die Antwort auf diese Frage ändern. Die aktuell ausgewählte ist viel zu wortreich, um effizient zu sein.
CSS
53

In Javascript können Sie Folgendes tun:

window.open(url, "_blank");
Satnam
quelle
29

Das Hinzufügen von target = "_ blank" sollte dies tun:

<a id="myLink" href="www.google.com" target="_blank">google</a>
Tim Büthe
quelle
3
Ich verstehe, tut mir leid, dass ich das verpasst habe. Nun, Sie können den Link so gestalten, dass er wie eine Schaltfläche aussieht und sich anfühlt. Wenn Sie die jQuery-Benutzeroberfläche verwenden, verwenden Sie dazu einfach die Schaltfläche .
Tim Büthe
1
Hervorragende Lösung für die große Mehrheit von uns, die sich nur mit Webdesign beschäftigen! Danke dir!
SMBiggs
1
+1, weil Sie denjenigen eine gute Lösung gegeben haben, die nach einer einfachen Antwort "Link in neuem Tab öffnen" suchen, wenn sie keine Schaltfläche verwenden.
user295583058
Genau das, was ich will. Vielen Dank
Shahrukh Anwar
+1, wenn etwas eine Seite in einem neuen Tab öffnet, handelt es sich logischerweise um einen Link, daher ist ein <a>Tag angemessen. Stile sollten verwendet werden, damit es wie eine Schaltfläche aussieht.
Kos
21

Sie können die Verwendung von JavaScript vergessen, da der Browser steuert, ob es in einem neuen Tab geöffnet wird oder nicht. Am besten tun Sie stattdessen Folgendes:

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

Dies wird immer in einer neuen Registerkarte geöffnet, unabhängig davon, welchen Browser ein Client aufgrund des target="_blank"Attributs verwendet.

Wenn Sie lediglich ohne dynamische Parameter umleiten müssen, können Sie einen Link mit dem target="_blank"Attribut verwenden, wie von Tim Büthe vorgeschlagen.

Tony
quelle
1
Funktioniert wie erforderlich (getestet auf Chrom, Firefox, IE10) :)
Zeeshan
10

Verwenden Sie window.openstatt window.location, um ein neues Fenster oder eine neue Registerkarte zu öffnen (abhängig von den Browsereinstellungen).

Ihre Geige funktioniert nicht, da kein buttonElement zur Auswahl steht. Versuchen Sie input[type=button]oder geben Sie den Knopf ein idund verwenden Sie #buttonId.

James Allardice
quelle
10

Meine bevorzugte Methode hat den Vorteil, dass kein JavaScript in Ihr Markup eingebettet ist:

CSS

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

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>
SpyderScript
quelle
Nun, ich glaube, ich habe eine neue bevorzugte Methode.
Halter
Ich denke, dieser beantwortet die Frage richtiger. +1 :)
Pramesh Bajracharya
3

Öffnen Sie in einem neuen Tab mit Javascript

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

Ich habe gerade target = "_ blank" unter dem Formular-Tag verwendet und es hat gut mit FF und Chrome funktioniert, wo es in einem neuen Tag geöffnet wird, aber mit IE wird es in einem neuen Fenster geöffnet.

Obaidul Hye
quelle
1
Ob eine Registerkarte oder ein Fenster geöffnet wird, hängt von den Browseroptionen des Benutzers ab. Ich weiß nichts über IE, aber in den meisten Browsern kann die Webseite nicht auswählen, ob der Link in einem Tab oder einem Fenster geöffnet wird, aber der Benutzer kann ihn konfigurieren.
Joeytwiddle
0

Versuche dies

<a id="link" href="www.gmail.com" target="_blank" >gmail</a>
Liebe Kumar
quelle
-1

Versuchen Sie diesen HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>
Raj Mori
quelle
-5

Das kannst du nicht. Dieses Verhalten ist nur für Plugins verfügbar und kann nur vom Benutzer konfiguriert werden.

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

Diese Schaltfläche sieht aus wie eine URL und kann in einem neuen Tab geöffnet werden.

Jolene
quelle
Sie müssen "Formular" hinzufügen
nerkn
Es ist (semantisch gesehen) keine gute Idee, eine Schaltfläche zu haben, die sich wie ein Link verhält. Verwenden Sie stattdessen das aTag.
Henrique Schreiner
-6

BENUTZEN Sie diesen Code

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 funktioniert gut in Mozilla, IE und Chrome auf und weniger als 22 Version; funktioniert aber nicht in Opera und Safari.

Lalit Guglani
quelle
2
Dies ist nicht die beste Antwort! Feststoff -1.
Shougo Makishima
1
Die Verwendung dieses Codes ist keine wirkliche Antwort und Sie haben keine Motivation dahinter.
Edeph