Dieopen() Methode derWindow-Schnittstelle lädt eine angegebene Ressource in einen neuen oder bestehenden Browsing-Kontext (z. B. ein Tab, ein Fenster oder einiframe) unter einem angegebenen Namen.

Syntax

open()open(url)open(url, target)open(url, target, windowFeatures)

Parameter

urlOptional

Ein String, der die URL oder den Pfad der zu ladenden Ressource angibt. Wenn ein leerer String ("") angegeben wird oder dieser Parameter weggelassen wird, wird eine leere Seite im anvisierten Browsing-Kontext geöffnet.

targetOptional

Ein String ohne Leerzeichen, der denNamen des Browsing-Kontextes angibt, in den die Ressource geladen wird. Wenn der Name keinen bestehenden Kontext identifiziert, wird ein neuer Kontext erstellt und mit dem angegebenen Namen versehen. Die speziellen„target“-Schlüsselwörter,_self,_blank (Voreinstellung),_parent,_top und_unfencedTop können ebenfalls verwendet werden._unfencedTop ist nur relevant fürfenced frames.

Dieser Name kann alstarget-Attribut von<a>- oder<form>-Elementen verwendet werden.

windowFeaturesOptional

Ein String, der eine kommagetrennte Liste von Fensterfunktionen in der Formname=value enthält. Boolesche Werte können mit einem der folgenden Werte auf wahr gesetzt werden:name,name=yes,name=true odername=n, wobein eine beliebige von null verschiedene Ganzzahl ist. Zu diesen Funktionen gehören Optionen wie die Standardgröße und -position des Fensters, ob ein minimales Popup-Fenster geöffnet werden soll und Ähnliches. Die folgenden Optionen werden unterstützt:

attributionsrcExperimentell

Zeigt an, dass Sie möchten, dass der Browser einenAttribution-Reporting-Eligible-Header gemeinsam mit demopen()-Aufruf sendet. Dieser Aufruf muss mittransient activation (d.h. innerhalb eines Benutzerinteraktionsereignishandlers wieclick) durchgeführt werden, innerhalb von fünf Sekunden nach der Benutzerinteraktion. Serverseitig wird dies verwendet, um das Senden einesAttribution-Reporting-Register-Source-Headers in der Antwort auszulösen, um die Registrierung einer Attributionsquelle abzuschließen.

Darüber hinaus wird der Browser auch dazu veranlasst, die zugehörigen Quelldaten zu speichern (wie imAttribution-Reporting-Register-Source-Antwort-Header bereitgestellt), wenn dieopen()-Methode abgeschlossen ist.

Weitere Details finden Sie in derAttribution Reporting API.

Hinweis:open()-Aufrufe können nicht verwendet werden, um einen Attribuierungs-Trigger zu registrieren.

popup

Standardmäßig öffnetwindow.open die Seite in einem neuen Tab. Wennpopup auf wahr gesetzt ist, wird ein minimales Popup-Fenster angefordert. Die im Popup-Fenster enthaltenen UI-Funktionen werden automatisch vom Browser entschieden, in der Regel wird nur eine Adressleiste angezeigt. Wennpopup vorhanden ist und auf falsch gesetzt ist, wird dennoch ein neuer Tab geöffnet.

Es gibt einige veraltete Funktionen, die dazu verwendet wurden, UI-Funktionen des geöffneten Fensters zu steuern. In modernen Browsern haben sie nur den Effekt, ein Popup anzufordern. Wennpopup nicht angegeben ist undwindowFeatures andere Funktionen (einschließlich nicht erkannter) alsnoopener,noreferrer oderattributionsrc enthält, wird das Fenster ebenfalls als Popup geöffnet, wenn eine der folgenden Bedingungen zutrifft:

• location undtoolbar sind beide falsch oder fehlen
• menubar ist falsch oder fehlt
• resizable ist falsch
• scrollbars ist falsch oder fehlt
• status ist falsch oder fehlt

Andernfalls wird das Fenster als Tab geöffnet.

width oderinnerWidth

Gibt die Breite des Inhaltsbereichs einschließlich Bildlaufleisten an. Der mindestens erforderliche Wert beträgt 100.

height oderinnerHeight

Gibt die Höhe des Inhaltsbereichs einschließlich Bildlaufleisten an. Der mindestens erforderliche Wert beträgt 100.

left oderscreenX

Gibt den Abstand in Pixeln von der linken Seite des Arbeitsbereichs an, wie es vom Betriebssystem des Benutzers definiert wird, wo das neue Fenster erzeugt wird.

top oderscreenY

Gibt den Abstand in Pixeln von der oberen Seite des Arbeitsbereichs an, wie es vom Betriebssystem des Benutzers definiert wird, wo das neue Fenster erzeugt wird.

noopener

Wenn diese Funktion gesetzt ist, hat das neue Fenster keinen Zugriff auf das ursprüngliche Fenster überWindow.opener und gibtnull zurück.

Wennnoopener verwendet wird, werden nicht leere Zielnamen, außer_top,_self und_parent, in Bezug auf die Entscheidung, ob ein neuer Browsing-Kontext geöffnet wird, wie_blank behandelt.

noreferrer

Wenn diese Funktion gesetzt ist, wird derReferer-Header ausgelassen, undnoopener wird auf wahr gesetzt. Weitere Informationen finden Sie unterrel="noreferrer".

Einnull-Wert wird wie der leere String ("") behandelt.

Rückgabewert

Wenn der Browser den neuen Browsing-Kontext erfolgreich öffnet, wird ein`WindowProxy`-Objekt zurückgegeben. Der zurückgegebene Verweis kann verwendet werden, um auf Eigenschaften und Methoden des neuen Kontexts zuzugreifen, solange er den Sicherheitsanforderungen dersame-origin policy entspricht.

Wenn derCross-Origin-Opener-Policy HTTP-Header verwendet wird und die Dokumentrichtlinien so sind, dass das Dokument in einer neuenBrowsing-Kontextgruppe geöffnet wird, werden Verweise auf das geöffnete Fenster getrennt, und das zurückgegebene Objekt zeigt an, dass das geöffnete Fenster geschlossen ist (closed isttrue).

null wird zurückgegeben, wenn der Browser den neuen Browsing-Kontext nicht öffnen kann, zum Beispiel weil er von einem Browser-Popup-Blocker blockiert wurde.

Beschreibung

Dieopen()-Methode derWindow-Schnittstelle nimmt eine URL als Parameter und lädt die Ressource, die sie identifiziert, in einen neuen oder bestehenden Tab oder ein Fenster. Dertarget-Parameter bestimmt, in welches Fenster oder Tab die Ressource geladen wird, und derwindowFeatures-Parameter kann verwendet werden, um ein neues Popup mit minimalen UI-Funktionen zu eröffnen und dessen Größe und Position zu steuern.

Remote-URLs werden nicht sofort geladen. Wennwindow.open() zurückkehrt, enthält das Fenster immerabout:blank. Das eigentliche Abrufen der URL wird verzögert und startet, nachdem der aktuelle Skriptblock die Ausführung beendet hat. Die Fenstergenerierung und das Laden der referenzierten Ressource erfolgen asynchron.

Moderne Browser haben strikte Popup-Blocker-Richtlinien. Popup-Fenster müssen als direkte Reaktion auf Benutzeraktionen geöffnet werden, und jedesWindow.open()-Aufruf erfordert ein separates Benutzeraktionsergeignis. Dies verhindert, dass Websites Benutzer mit vielen Fenstern belästigen. Es stellt jedoch ein Problem für Mehrfensteranwendungen dar. Um dieses Problem zu umgehen, können Sie Ihre Anwendungen so gestalten, dass sie:

• Nicht mehr als ein neues Fenster gleichzeitig öffnen.
• Bestehende Fenster wiederverwenden, um verschiedene Seiten anzuzeigen.
• Benutzer darüber informieren, wie sie ihre Browsereinstellungen aktualisieren können, um mehrere Fenster zuzulassen.

Beispiele

Öffnen eines neuen Tabs

window.open("https://www.mozilla.org/", "mozillaTab");

Öffnen eines Popups

Alternativ demonstriert das folgende Beispiel, wie man ein Popup mit derpopup-Funktion öffnet.

window.open("https://www.mozilla.org/", "mozillaWindow", "popup");

Es ist möglich, die Größe und Position des neuen Popups zu steuern:

const windowFeatures = "left=100,top=100,width=320,height=320";const handle = window.open(  "https://www.mozilla.org/",  "mozillaWindow",  windowFeatures,);if (!handle) {  // The window wasn't allowed to open  // This is likely caused by built-in popup blockers.  // …}

Progressive Verbesserung

In einigen Fällen ist JavaScript deaktiviert oder nicht verfügbar undwindow.open() funktioniert nicht. Statt sich ausschließlich auf das Vorhandensein dieser Funktion zu verlassen, können wir eine alternative Lösung bieten, sodass die Website oder Anwendung weiterhin funktioniert.

Alternativen bereitstellen, wenn JavaScript deaktiviert ist

Wenn die Unterstützung für JavaScript deaktiviert oder nicht vorhanden ist, erstellt der Benutzeragent ein entsprechendes zweites Fenster oder rendert die referenzierte Ressource gemäß seiner Handhabung destarget-Attributes. Das Ziel und die Idee ist es, dem Benutzer eine Möglichkeit zu bieten (undnicht aufzuzwingen), die referenzierte Ressource zu öffnen.

HTML

<a href="https://www.wikipedia.org/">  Wikipedia, a free encyclopedia (opens in another, possibly already existing,  tab)</a>

JavaScript

let windowObjectReference = null; // global variablefunction openRequestedTab(url, windowName) {  if (windowObjectReference === null || windowObjectReference.closed) {    windowObjectReference = window.open(url, windowName);  } else {    windowObjectReference.focus();  }}const link = document.querySelector("a[target='OpenWikipediaWindow']");link.addEventListener("click", (event) => {  openRequestedTab(link.href);  event.preventDefault();});

Der obige Code löst einige Usability-Probleme im Zusammenhang mit Links, die Popups öffnen. Der Zweck vonevent.preventDefault() im Code ist es, die Standardaktion des Links abzubrechen: Wenn der Ereignis-Listener fürclick ausgeführt wird, besteht keine Notwendigkeit, die Standardaktion des Links auszuführen. Aber wenn die Unterstützung für JavaScript auf dem Benutzerbrowser deaktiviert oder nicht vorhanden ist, wird der Ereignis-Listener fürclick ignoriert und der Browser lädt die referenzierte Ressource im Zielfenster oder -rahmen, das den Namen"WikipediaWindowName" hat. Wenn kein Rahmen oder Fenster den Namen"WikipediaWindowName" hat, erstellt der Browser ein neues Fenster und benennt es"WikipediaWindowName".

Bestehende Fenster wiederverwenden undtarget="_blank" vermeiden

Das Verwenden von"_blank" als Wert des target-Attributs wird mehrere neue und unbenannte Fenster auf dem Desktop des Benutzers erstellen, die nicht recycelt oder wiederverwendet werden können. Versuchen Sie, Ihremtarget-Attribut einen sinnvollen Namen zu geben und diesen auf Ihrer Seite wiederzuverwenden, sodass ein Klick auf einen anderen Link die referenzierte Ressource in einem bereits erstellten und gerenderten Fenster laden kann (damit der Prozess für den Benutzer beschleunigt wird) und daher der Grund (und die Benutzung der Benutzersystemressourcen, verbrachte Zeit) für das Erstellen eines zweiten Fensters gerechtfertigt ist. Es ist viel benutzerressourcenfreundlicher, einen einzelnentarget-Attributwert zu verwenden und ihn in Links wiederzuverwenden, da so nur ein einziges sekundäres Fenster erstellt wird, das recycelt wird.

Hier ist ein Beispiel, bei dem ein zweites Fenster geöffnet und für andere Links wiederverwendet werden kann:

HTML

<p>  <a href="https://www.wikipedia.org/">    Wikipedia, a free encyclopedia (opens in another, possibly already existing,    tab)  </a></p><p>  <a    href="https://support.mozilla.org/products/firefox"   >    Firefox FAQ (opens in another, possibly already existing, tab)  </a></p>

JavaScript

let windowObjectReference = null; // global variablelet previousURL; /* global variable that will store the                    url currently in the secondary window */function openRequestedSingleTab(url) {  if (windowObjectReference === null || windowObjectReference.closed) {    windowObjectReference = window.open(url, "SingleSecondaryWindowName");  } else if (previousURL !== url) {    windowObjectReference = window.open(url, "SingleSecondaryWindowName");    /* if the resource to load is different,       then we load it in the already opened secondary window and then       we bring such window back on top/in front of its parent window. */    windowObjectReference.focus();  } else {    windowObjectReference.focus();  }  previousURL = url;  /* explanation: we store the current url in order to compare url     in the event of another call of this function. */}const links = document.querySelectorAll(  "a[target='SingleSecondaryWindowName']",);for (const link of links) {  link.addEventListener("click", (event) => {    openRequestedSingleTab(link.href);    event.preventDefault();  });}

Same-origin policy

Wenn der neu geöffnete Browsing-Kontext nicht den selbenUrsprung teilt, kann das öffnende Skript nicht mit dem Inhalt des Browsing-Kontextes interagieren (lesen oder schreiben).

// Script from example.comconst otherOriginContext = window.open("https://example.org");// example.com and example.org are not the same originconsole.log(otherOriginContext.origin);// DOMException: Permission denied to access property "origin" on cross-origin object

// Script from example.comconst sameOriginContext = window.open("https://example.com");// This time, the new browsing context has the same originconsole.log(sameOriginContext.origin);// https://example.com

Für mehr Informationen siehe den ArtikelSame-origin policy.

Barrierefreiheitsbedenken

Vermeiden Sie die Verwendung von window.open()

Es ist vorzuziehen, die Verwendung vonwindow.open() zu vermeiden, aus mehreren Gründen:

• Moderne Browser bieten eine Popup-Blocking-Funktion.
• Moderne Browser bieten ein Tab-Browsing, und Tab-fähige Browser-Nutzer ziehen es vor, neue Tabs zu öffnen statt neue Fenster in den meisten Situationen zu öffnen.
• Benutzer können integrierte Browserfunktionen oder Erweiterungen verwenden, um zu entscheiden, ob ein Link in einem neuen Fenster, im gleichen Fenster, in einem neuen Tab, im gleichen Tab oder im Hintergrund geöffnet wird. Das Erzwingen des Öffnens auf eine bestimmte Weise, unter Verwendung vonwindow.open(), wird sie verwirren und ihre Gewohnheiten ignorieren.
• Popups haben keine Menü-Symbolleiste, während neue Tabs die Benutzeroberfläche des Browserfensters verwenden; daher bevorzugen viele Benutzer das Tab-Browsing, da die Oberfläche stabil bleibt.

Verwenden Sie niemals window.open() inline in HTML

Vermeiden Sie<a href="#"> oder<a href="#" …>.

Diese fehlerhaftenhref-Werte verursachen unerwartetes Verhalten beim Kopieren/Ziehen von Links, Öffnen von Links in einem neuen Tab/Fenster, beim Bookmarken oder wenn JavaSkript lädt, Fehler auftreten oder deaktiviert ist. Sie vermitteln auch falsche Semantik an unterstützende Technologien wie Bildschirmleser.

Falls notwendig, verwenden Sie stattdessen ein<button>-Element. Im Allgemeinensollten Sie nur einen Link zur Navigation zu einer echten URL verwenden.

Identifizieren Sie immer Links, die zu einem zweiten Fenster führen

Identifizieren Sie Links, die neue Fenster öffnen werden, auf eine Weise, die die Navigation für Benutzer unterstützt.

<a href="https://www.wikipedia.org">  Wikipedia (opens in new tab)</a>

Der Zweck ist es, Benutzer vor Kontextänderungen zu warnen, um Verwirrungen auf Seiten des Benutzers zu minimieren: Das Ändern des aktuellen Fensters oder das Öffnen neuer Fenster kann für Benutzer sehr verwirrend sein (im Fall eines Popups bietet keine Symbolleiste eine "Zurück"-Schaltfläche, um zum vorherigen Fenster zurückzukehren).

Wenn extreme Kontextänderungen explizit identifiziert werden, bevor sie auftreten, können die Benutzer bestimmen, ob sie fortfahren möchten oder sie können sich auf die Änderung vorbereiten: nicht nur werden sie nicht verwirrt oder desorientiert fühlen, sondern erfahrenere Benutzer können besser entscheiden, wie sie solche Links öffnen (in einem neuen Fenster oder nicht, im selben Fenster, in einem neuen Tab oder nicht, im "Hintergrund" oder nicht).

• WebAIM: Links und Hypertext - Hypertext-Links
• MDN / Verständnis von WCAG, Leitlinie 3.2
• G200: Öffnen neuer Fenster und Tabs von einem Link nur bei Bedarf
• G201: Benutzern eine Vorwarnung geben, wenn ein neues Fenster geöffnet wird

Spezifikationen

Browser-Kompatibilität

Siehe auch

• target-Attribut-Dokumentation:
  • <a>
  • <form>
• window.close()
• window.closed
• window.focus()
• window.opener
• rel="opener" undrel="noopener"
• Same-origin policy