it-swarm.com.de

Öffnen Sie eine URL in einem neuen Tab (und nicht in einem neuen Fenster) mit JavaScript

Ich versuche, ein URL in einem neuen Tab zu öffnen, im Gegensatz zu einem Popup-Fenster.

Ich habe verwandte Fragen gesehen, bei denen die Antworten ungefähr so ​​aussehen würden:

window.open(url,'_blank');
window.open(url);

Aber keiner von ihnen funktionierte für mich, der Browser versuchte immer noch, ein Popup-Fenster zu öffnen.

1875
Mark F

Nichts, was ein Autor tun kann, kann sich dafür entscheiden, in einem neuen Tab statt in einem neuen Fenster zu öffnen. Es ist eine Benutzerpräferenz .

CSS3 schlug vor target-new , aber die Spezifikation wurde aufgegeben .

Die Umkehrung ist nicht wahr; Indem Sie die Abmessungen für das Fenster im dritten Argument von window.open() angeben, können Sie ein neues Fenster auslösen, wenn die Einstellungen für Registerkarten gelten.

819
Quentin

Das ist ein Trick,

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

In den meisten Fällen sollte dies direkt im onclick -Handler für den Link geschehen, um Popupblocker und das Standardverhalten "Neues Fenster" zu verhindern. Sie können dies auf diese Weise tun oder indem Sie Ihrem DOM -Objekt einen Ereignis-Listener hinzufügen.

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

1530
Rinto George

window.open() wird nicht in einem neuen Tab geöffnet, wenn dies beim tatsächlichen Klickereignis nicht der Fall ist. In dem angegebenen Beispiel wird die URL beim tatsächlichen Klickereignis geöffnet. Dies funktioniert, sofern der Benutzer über die entsprechenden Einstellungen im Browser verfügt.

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

Wenn Sie versuchen, einen Ajax-Aufruf innerhalb der Klick-Funktion auszuführen und bei Erfolg ein Fenster öffnen möchten, stellen Sie sicher, dass Sie den Ajax-Aufruf mit der Option async : false ausführen.

350
Venkat Kotra

window.open Popups können in einem neuen Tab in allen Browsern nicht zuverlässig geöffnet werden

Verschiedene Browser implementieren das Verhalten vonwindow.openauf unterschiedliche Weise, insbesondere in Bezug auf die Browsereinstellungen eines Benutzers. Sie können nicht dasselbe Verhalten für window.open erwarten. Dies gilt für alle Internet Explorer-, Firefox- und Chrome-Umgebungen, da die Browsereinstellungen der Benutzer unterschiedlich gehandhabt werden.

Beispielsweise können Benutzer von Internet Explorer (11) Popups in einem neuen Fenster oder auf einer neuen Registerkarte öffnen. Sie können Benutzer von Internet Explorer 11 nicht dazu zwingen, Popups auf eine bestimmte Art und Weise zu öffnen.window.open , wie in Quentins Antwort angedeutet.

Wie bei Firefox (29) können Benutzer mit window.open(url, '_blank')abhängig von den Tab-Einstellungen ihres Browsers Popups durch Angabe von Breite und Höhe in einem neuen Fenster öffnen (siehe " Was ist mit Chrome? ".

Demonstration

Gehen Sie zu den Einstellungen Ihres Browsers und konfigurieren Sie ihn so, dass Popups in einem neuen Fenster geöffnet werden.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Testseite

Verwenden Sie nach dem Einrichten von Internet Explorer (11) zum Öffnen von Popups in einem neuen Fenster (siehe oben) die folgende Testseite, um window.open zu testen:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Beachten Sie, dass die Popups in einem neuen Fenster geöffnet werden, nicht in einem neuen Tab.

Sie können diese Snippets auch in Firefox (29) testen, wobei die Registerkarteneinstellung auf neue Fenster festgelegt ist, und dieselben Ergebnisse anzeigen.

Was ist mit Chrome? Es implementiert window.open anders als Internet Explorer (11) und Firefox (29).

Ich bin nicht zu 100% sicher, aber es sieht so aus, als ob Chrome (Version 34.0.1847.131 m) keine Einstellungen enthält, mit denen der Benutzer auswählen kann, ob Popups in einem neuen Fenster geöffnet werden sollen oder nicht Fenster oder eine neue Registerkarte (wie Firefox und Internet Explorer). Ich habe die Dokumentation zu the Chrome zum Verwalten von Popups durchgesehen, aber nichts davon erwähnt.

Auch wieder scheinen verschiedene Browser das Verhalten vonwindow.open zu implementieren anders. In Chrome und Firefox Wenn Sie eine Breite und Höhe angeben, wird ein Popup-Fenster angezeigt. Auch wenn ein Benutzer Firefox (29) so eingestellt hat, dass neue Fenster in einem neuen Tab geöffnet werden (wie in den Antworten auf = angegeben) JavaScript wird in einem neuen Fenster geöffnet, nicht tab ):

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

Derselbe Code-Snippet oben öffnet immer einen neuen Tab in Internet Explorer 11, wenn Benutzer Tabs als ihre Browsereinstellungen festlegen. Nicht einmal die Angabe einer Breite und Höhe erzwingt ein neues Popup-Fenster für sie.

Das Verhalten von window.open in Chrome scheint zu sein, Popups in einem neuen Tab zu öffnen, wenn sie in einem onclick -Ereignis verwendet werden, und sie in neuen Fenstern zu öffnen, wenn sie über die Browserkonsole verwendet werden ( wie von anderen Leuten angegeben ) und um sie in neuen Fenstern zu öffnen, wenn dies mit einer Breite und einer Höhe angegeben wird.

Zusammenfassung

Verschiedene Browser implementieren das Verhalten vonwindow.opennterschiedlich in Bezug auf die Browsereinstellungen der Benutzer. Sie können nicht erwarten, dass das gleiche Verhalten für window.open für alle gilt Internet Explorer, Firefox und Chrome, da die Browsereinstellungen der Benutzer unterschiedlich behandelt werden.

Zusätzliche Lektüre

241
user456814

Einzeiler:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

Es erstellt ein virtuelles a Element, gibt es target="_blank", so dass es in einem neuen Tab geöffnet wird, gibt es das richtige urlhref und klickt es dann an.

Und wenn Sie möchten, können Sie auf dieser Basis eine Funktion erstellen:

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

und dann kannst du es so benutzen:

openInNewTab("http://google.com"); 
203
pie6k

Wenn Sie window.open(url, '_blank') verwenden, wird es in Chrome blockiert (Popup-Blocker).

Versuche dies:

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

Mit reinem JavaScript

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
71
Mohammed Safeer

Um Steven Spielbergs Antwort zu erläutern, habe ich dies in einem solchen Fall getan:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

Auf diese Weise wird, kurz bevor der Browser dem Link folgt, das Zielattribut festgelegt, sodass der Link in einem neuen Tab oder Fenster geöffnet wird (abhängig von den Einstellungen des Benutzers).

59
arikfr

Ich benutze die folgenden und es funktioniert sehr gut !!!

window.open(url, '_blank').focus();
34

Eine interessante Tatsache ist, dass die neue Registerkarte nicht geöffnet werden kann, wenn der Benutzer die Aktion nicht aufruft (Klicken auf eine Schaltfläche oder Ähnliches) oder wenn sie asynchron ist, wird sie beispielsweise NICHT in der neuen Registerkarte geöffnet:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Dies kann jedoch abhängig von den Browsereinstellungen in einem neuen Tab geöffnet werden:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
18
karaxuna

Ich denke, dass Sie das nicht kontrollieren können. Wenn der Benutzer seinen Browser so eingerichtet hat, dass Links in einem neuen Fenster geöffnet werden, können Sie dies nicht erzwingen, um Links in einem neuen Tab zu öffnen.

JavaScript wird in einem neuen Fenster geöffnet, nicht in einem Tab

15
Fran Verona

Wenn Sie nur die [strWindowFeatures] -Parameter weglassen, wird ein neuer Tab geöffnet, AUSSER die Browsereinstellungen überschreiben (die Browsereinstellungen trumpfen JavaScript).

Neues Fenster

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

Neue Registerkarte

var myWin = window.open(strUrl, strWindowName);

-- oder --

var myWin = window.open(strUrl);
13
MannyC
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
11
spirinvladimir

Sie können einen Trick mit form anwenden:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

jsFiddle Demo

11
CodeNinja

Dies hat nichts mit den Browsereinstellungen zu tun , wenn Sie versuchen, eine neue Registerkarte über eine benutzerdefinierte Funktion zu öffnen.

Öffnen Sie auf dieser Seite eine JavaScript-Konsole und geben Sie Folgendes ein:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

Es wird unabhängig von Ihren Einstellungen versucht, ein Popup zu öffnen, da der Klick von einer benutzerdefinierten Aktion stammt.

Um sich wie ein tatsächlicher Mausklick auf einen Link zu verhalten, müssen Sie @ spirinvladimir's advice und really create it:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Hier ist ein vollständiges Beispiel (probieren Sie es nicht mit jsFiddle oder ähnlichen Online-Editoren aus, da Sie von dort nicht zu externen Seiten weiterleiten können):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
10
chipairon

Oder Sie können einfach ein Linkelement erstellen und darauf klicken ...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

Dies sollte nicht von Popup-Blockern blockiert werden ... Hoffentlich.

4
Luke Alderton

Es gibt eine Antwort auf diese Frage und es ist nicht nein.

Ich fand eine leichte Arbeit um:

Schritt 1: Erstellen Sie einen unsichtbaren Link:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Schritt 2: Klicken Sie programmgesteuert auf diesen Link:

document.getElementById("yourId").click();

Bitte schön! Funktioniert ein Zauber für mich.

3
ALZlper

Wenn Sie nur versuchen, das Element zu laden, versuchen Sie dies. Beim Laden der Seite wird Ihre Zieleigenschaft mit dem richtigen Attribut hinzugefügt.

$ (your_element_here) .prop ('target', '_blank');

1
HeroZero
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
1
Andrew Luca

Wie wäre es, wenn Sie einen <a> mit _blank als target -Attributwert und den url als href mit Stilanzeige: Mit einem untergeordneten Element ausgeblendet? Fügen Sie es dann zum DOM hinzu und lösen Sie das click -Ereignis für ein untergeordnetes Element aus.

AKTUALISIEREN

Das geht nicht Der Browser verhindert das Standardverhalten. Es kann programmgesteuert ausgelöst werden, entspricht jedoch nicht dem Standardverhalten.

Überzeugen Sie sich selbst: http://jsfiddle.net/4S4ET/

0
Victor