Wie kann ich einen Link in einem neuen Fenster öffnen?

94

Ich habe einen Klick-Handler für einen bestimmten Link, in dem ich etwas Ähnliches wie das Folgende tun möchte:

window.location = url

Ich brauche dies, um die URL tatsächlich in einem neuen Fenster zu öffnen. Wie mache ich das?

Chris
quelle

Antworten:

204

Sie können mögen:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

Sie könnten auch die Set targetzu _blanktatsächlich.

Sarfraz
quelle
Aber dieser Abfragecode navigiert nicht automatisch zum Ziel
Amr Elgarhy
26
_blank ist das Standardziel, daher sollte die Verwendung von window.open (url) ausreichen
themerlinproject
Ich bin mir nicht sicher, ob es helfen wird und nicht genau das gleiche Problem, aber ich habe nach der gleichen Lösung gesucht, um eine Datei herunterzuladen (nicht über einen Link, sondern über eine Schaltfläche). In Chrome wurde das Fenster nicht geöffnet und nicht heruntergeladen, bis ich einfach zu window.location = gewechselt habe 'url', die den Speicherort nicht ändert, sondern die Datei herunterlädt ...
gdoumenc
window.open (url) ist in Ordnung :)
Fudu
33

So erzwingen Sie das Ziel in einem Klick-Handler:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});
Chadwackerman
quelle
5
Die Verwendung des jQuery-Selektors im Klick-Handler ist nicht erforderlich, sodass die Zeile $(this).attr('target', '_blank'); in geändert werden this.target = "_blank";kann. Wenn die Ankerlinks auf der Seite so geändert werden können, dass sie rel="external"Attribute enthalten, können Sie einen globalen Klick-Handler für die Seite mit dem jQuery-Selektor erstellen, a[rel="external"]anstatt einen zu haben Klicken Sie auf den Handler pro ausgewähltem Link mita#link_id
himanshu
17

Sie müssen verwenden window.open(url);

Referenzen:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Amr Elgarhy
quelle
5
Huch! Verwenden oder verknüpfen Sie keine w3schools, es ist NICHT mit dem W3C verbunden. Verwenden Sie stattdessen MDN: developer.mozilla.org/en-US/docs/Web/API/Window.open
AB Carroll
5
w3schools ist gut (ignoriere die 'wenigen' w3c Trolle) ... wird weiterhin EINE maßgebliche Quelle sein ... sogar w3c unterstützt es jetzt wieder ;-)
Dawesi
4

Sie können hierfür auch die Methode jquery prop () verwenden.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 
Usha
quelle
2

Ich habe gerade eine interessante Lösung für dieses Problem gefunden. Ich habe Bereiche erstellt, die Informationen enthalten, die auf der Rückgabe eines Webdienstes basieren. Ich dachte darüber nach, einen Link um die Spanne zu setzen, damit das "a" den Klick erfasst, wenn ich darauf klicke.

Aber ich habe versucht, den Klick mit der Spanne zu erfassen ... also dachte ich mir, warum ich das nicht tun sollte, als ich die Spanne erstellte.

var span = $('<span id="something" data-href="'+url+'" />');

Ich habe dann einen Klick-Handler an den Bereich gebunden, der einen Link basierend auf dem Attribut 'data-href' erstellt hat:

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

Dadurch konnte ich erfolgreich auf eine Spanne klicken und ein neues Fenster mit einer richtigen URL öffnen.

Dramoth
quelle
1

Was ist los mit <a href="myurl.html" target="_blank">My Link</a>? Kein Javascript erforderlich ...

Michaja Broertjes
quelle
1

Diese Lösung berücksichtigte auch den Fall, dass die URL leer ist und der leere Link deaktiviert (grau) ist.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Scott 混合 理论
quelle
0

Beachten Sie, ob Sie AJAX-Anforderungen in der Ereignishandlerfunktion für das Klickereignis ausführen möchten . Aus irgendeinem Grund öffnet Chrome (und möglicherweise andere Browser) keinen neuen Tab / Fenster.

user2618825
quelle
0

Dies ist keine sehr schöne Lösung, aber es funktioniert:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Live-Beispiel: http://jsfiddle.net/7eRLb/

Adriandorin
quelle
0

Microsoft IE unterstützt keinen Namen als zweites Argument.

window.open('url', 'window name', 'window settings');

Problem ist window name. Das wird funktionieren:

window.open('url', '', 'window settings')

Microsoft lässt nur die folgenden Argumente zu, wenn dieses Argument überhaupt verwendet wird:

  • _leer
  • _Medien
  • _Elternteil
  • _Suche
  • _selbst
  • _oben

Überprüfen Sie diese Microsoft-Site

dhanesh sr
quelle
4
-1: Ungeachtet Ihres lizenzverletzenden Kopierens / Einfügens von stackoverflow.com/a/1462500/560648 ist dies nicht der Fall. Das Argument wird unterstützt . Es darf einfach keine Leerzeichen, Bindestriche oder andere Satzzeichen enthalten. Lesen Sie andere Antworten und Kommentare zu dieser Frage.
Leichtigkeitsrennen im Orbit