Chrome, Javascript, window.open in neuem Tab


110

In Chrome wird dies in einem neuen Tab geöffnet:

<button onclick="window.open('newpage.html', '_blank')" />

Dies wird in einem neuen Fenster geöffnet (aber ich möchte, dass dies auch in einem neuen Tab geöffnet wird:

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

Ist das machbar?


2
Sind Sie sicher, was Sie bestätigen? Beide Fragmente haben das gleiche Ergebnis.
Denys Séguret

1
Ob ein Fenster in einer Registerkarte oder in einem neuen Fenster geöffnet wird, hängt vom lokalen Browser ab und davon, wie der Benutzer seinen Browser konfiguriert. Dies können Sie in Javascript nicht angeben.
jfriend00

Antworten:


150

Sie können dies nicht direkt steuern, da dies eine Option ist, die von Internet Explorer-Benutzern gesteuert wird.

Das Öffnen von Seiten mit Window.open mit einem anderen Fensternamen wird in einem neuen Browserfenster wie einem Popup oder in einem neuen Tab geöffnet, wenn der Benutzer den Browser dafür konfiguriert hat.

BEARBEITEN:

Eine detailliertere Erklärung:

1. In modernen Browsern wird window.open in einem neuen Tab und nicht in einem Popup geöffnet.

2. Sie können einen Browser zwingen, ein neues Fenster ('Popup') zu verwenden, indem Sie im 3. Parameter Optionen angeben

3. Wenn der Aufruf von window.open nicht Teil eines vom Benutzer initiierten Ereignisses war, wird er in einem neuen Fenster geöffnet.

4. Ein „vom Benutzer initiiertes Ereignis“ muss nicht denselben Funktionsaufruf haben, sondern muss von der Funktion stammen, die durch einen Benutzerklick aufgerufen wird

5. Wenn ein vom Benutzer initiiertes Ereignis einen Funktionsaufruf delegiert oder verzögert (in einem Ereignis-Listener oder -Delegierten, der nicht an das Klickereignis gebunden ist oder beispielsweise setTimeout verwendet), verliert es seinen Status als "vom Benutzer initiiert".

6. Einige Popup-Blocker erlauben das Öffnen von Fenstern aus vom Benutzer initiierten Ereignissen, jedoch nicht die Fenster, die ansonsten geöffnet wurden.

7. Wenn ein Popup blockiert wird, werden manchmal auch diejenigen blockiert, die normalerweise von einem Blocker (über vom Benutzer initiierte Ereignisse) zugelassen werden. Einige Beispiele…

Erzwingen, dass ein Fenster in einer neuen Browserinstanz anstelle einer neuen Registerkarte geöffnet wird:

window.open('page.php', '', 'width=1000');

Folgendes würde als vom Benutzer initiiertes Ereignis gelten, obwohl es eine andere Funktion aufruft:

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

Folgendes würde nicht als vom Benutzer initiiertes Ereignis gelten, da das setTimeout es verzögert:

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);

2
Ich möchte nur hinzufügen, dass ich durch Testen in Chrome und FF herausgefunden habe, dass die Verwendung von window.open in dem, was Sie als "vom Benutzer initiiertes Ereignis" definieren, die Standardaktion des Browsers beibehält. Damit meine ich, dass, wenn Sie in Chrome die Umschalttaste auf Chrome gedrückt halten und auf ein neues Browserfenster klicken, ein neuer Tab im Hintergrund geöffnet wird, wenn Sie die Strg-Taste gedrückt halten (oder die mittlere Maustaste drücken). Was sehr schön ist, Sie können einige Dinge machen, ohne überall Anker-Tags platzieren zu müssen.
Hoffmann

3
"Wenn der Aufruf von window.open nicht Teil eines vom Benutzer initiierten Ereignisses war, wird er in einem neuen Fenster geöffnet." Nein, es wird mit ziemlicher Sicherheit überhaupt nicht geöffnet.
TJ Crowder

3
Ab dem 29.09.2014 öffnen die neuesten Firefox ESR- und IE 11-Links _blank oder window.open in einem neuen Fenster, wenn die js-Aufrufe _blank als Fensternamen verwenden. Das aktuelle Chrome ist nicht so einfach. Ich habe getestet, wie ich ein neues Fenster geöffnet habe, das oben, links, Breite, Höhe, Symbolleiste, Position, Verzeichnisse, Status, Menüleiste, Bildlaufleisten und Größenänderung passiert, und jedes dieser Fenster nacheinander weggelassen habe. Chrome öffnete sie alle in einem neuen Tab, außer wenn Status, Menüleiste oder Bildlaufleisten weggelassen wurden. Dies scheint so willkürlich, dass es kaum zu glauben ist, aber empirisch ist das passiert. Beispiel hier: jsbin.com/mobiyeqojaha/1
Enigment

34

Es ist manchmal nützlich, die Verwendung einer Registerkarte zu erzwingen, wenn der Benutzer dies mag. Wie Prakash oben erwähnt hat, wird dies manchmal durch die Verwendung eines nicht vom Benutzer initiierten Ereignisses diktiert, aber es gibt Möglichkeiten, dies zu umgehen.

Beispielsweise:

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

öffnet immer "newurl" in einem neuen Browserfenster, da die Funktion "always" nicht als vom Benutzer initiiert betrachtet wird. Wenn wir dies jedoch tun:

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

Wir öffnen das neue Browserfenster oder erstellen die neue Registerkarte, wie durch die Benutzerpräferenz in dem vom Benutzer initiierten Button-Klick bestimmt. Dann setzen wir den Ort einfach auf die gewünschte URL, nachdem wir vom AJAX-Beitrag zurückgekehrt sind. Voila, wir erzwingen die Verwendung eines Tabs, wenn der Benutzer das mag.


Ich habe festgestellt, dass der Browser ein neues Fenster öffnet, wenn Sie einen Haltepunkt in Chrome für das Fenster "open" festgelegt haben. Wenn der Code nicht unterbrochen wird, wird stattdessen eine neue Registerkarte geöffnet.
Skinnybrit51

Es ist eine OK-Problemumgehung, es sei denn, Ihr window.open und das Ergebnis der Funktion dauert ungefähr 5/6/7 Sekunden. Überlegen Sie, ob die Funktion Daten an einen Server sendet, der eine PDF-Datei generiert, was 10 Sekunden dauert. Das Fenster, das für eine leere Registerkarte geöffnet wird, ist sofort geöffnet und der Benutzer starrt 10 Sekunden lang auf die leere Registerkarte, bis sie auf magische Weise gefüllt wird. Noch unter iOS geht es um die einzige Lösung.
Kevin Brown


11

Im Moment (Chrome 39) verwende ich diesen Code, um einen neuen Tab zu öffnen:

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

Dies kann sich natürlich in zukünftigen Versionen von Chrome ändern.

Es ist eine schlechte Idee, dies zu verwenden, wenn Sie den von Ihren Benutzern verwendeten Browser nicht steuern können. Es funktioniert möglicherweise nicht in zukünftigen Versionen oder mit anderen Einstellungen.


Gemäß dem Kommentar von jfriend00 bestimmt die Art und Weise, wie der Benutzer den Browser konfiguriert, wie neue Fenster geöffnet werden, nicht Code.
Lee Taylor

Ich stimme Ihnen zu, dass es eine schlechte Idee ist, sich auf eine solche Lösung zu verlassen, wenn Sie Ihre Umgebung nicht kontrollieren können. Es gibt jedoch Situationen, in denen dies möglich ist (z. B. verwende ich es in einer Anwendung, die mit einem eigenen tragbaren Chrome geliefert wird). Um dies zu verdeutlichen, habe ich meinen Anser bearbeitet.
Nico Wiedemann

2
Für diejenigen, die sich fragen, funktioniert das Ausführen dieses Code-Snippets aufgrund dieses Fehlers nicht:VM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
Benjamin Crouzier

6

Dadurch wird der Link in einem neuen Tab in Chrome und Firefox geöffnet und möglicherweise in weiteren Browsern, die ich nicht getestet habe:

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

Grundsätzlich wird eine neue leere Registerkarte geöffnet und anschließend die Position dieser leeren Registerkarte festgelegt. Beachten Sie, dass es sich um eine Art Hack handelt, da das Verhalten der Browser-Registerkarten / -Fenster in Wirklichkeit die Domäne, die Verantwortung und die Auswahl des Browsers und des Benutzers ist.

Die zweite Zeile kann in einem Rückruf aufgerufen werden (nachdem Sie beispielsweise eine AJAX-Anforderung ausgeführt haben), aber der Browser erkennt sie dann nicht als vom Benutzer initiiertes Klickereignis und blockiert möglicherweise das Popup.


1
$windowist nur die Art und Weise, wie AngularJS verwendet wird window. Sie können windowstattdessen einfach verwenden . Weitere Informationen: docs.angularjs.org/api/ng/service/$window
Magne

3

Klare Mini-Lösung $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()


0

Mit diesem Code können Sie in einem neuen Tab öffnen.

function openWindow( url )
{
  window.open(url, '_blank');
  window.focus();
}

Ich habe es von Stackoverflow bekommen ..


1
Dies funktioniert jedoch nur, wenn Sie sich in einem Benutzer-Klick-Handler befinden. Andernfalls wird ein neues Fenster geöffnet (aber Firefox blockiert Sie zumindest, bis der Benutzer dies zulässt).
DJsmith

@djsmith, ich benutze dies .. und habe nur in IE7 Probleme. Wenn Sie eine andere Lösung haben, schlagen Sie bitte vor .. Danke ..
Dilip Rajkumar

-2

Beste Art, wie ich benutze:

1- Link zu Ihrem HTML hinzufügen:

<a id="linkDynamic" target="_blank" href="#"></a>

2- JS-Funktion hinzufügen:

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3- Rufen Sie einfach die OpenNewTab-Funktion mit dem gewünschten Link auf

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.