Window: open() Methode

url Optional

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

target Optional

Ein String ohne Leerzeichen, der den Namen des Browsing-Kontexts angibt, in den die Ressource geladen wird. Wenn der Name keinen existierenden Kontext identifiziert, wird ein neuer Kontext erstellt und der angegebene Name zugewiesen. Auch die speziellen target Schlüsselwörter _self, _blank (Standardwert), _parent, _top und _unfencedTop können verwendet werden. _unfencedTop ist nur für fenced frames relevant.

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

windowFeatures Optional

Ein String, der eine durch Kommas getrennte Liste von Fenstermerkmalen in der Form name=value enthält. Boolesche Werte können auf wahr gesetzt werden mit: name, name=yes, name=true oder name=n, wobei n eine beliebige von null verschiedene Ganzzahl ist. Diese Merkmale umfassen Optionen wie die Standardgröße und -position des Fensters, ob ein minimales Popup-Fenster geöffnet werden soll und so weiter. Die folgenden Optionen werden unterstützt:

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit dem open()-Aufruf sendet. Dieser Aufruf muss mit transient activation erfolgen (d.h. innerhalb eines Benutzerinteraktionsereignishandlers wie click), innerhalb von fünf Sekunden nach der Benutzerinteraktion. Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source-Headers in der Antwort auszulösen, um die Registrierung einer Attribution-Quelle abzuschließen.

Zusätzlich wird der Browser auch ausgelöst, die zugehörigen Quelldaten (wie im Attribution-Reporting-Register-Source-Antwortheader bereitgestellt) zu speichern, wenn die open()-Methode abgeschlossen ist.

Siehe die Attribution Reporting API für weitere Details.

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

popup

Standardmäßig öffnet window.open die Seite in einem neuen Tab. Wenn popup auf wahr gesetzt ist, wird angefordert, dass ein minimales Popup-Fenster verwendet wird. Die UI-Merkmale des Popup-Fensters werden automatisch vom Browser entschieden, in der Regel wird nur eine Adressleiste angezeigt. Wenn popup vorhanden und auf false gesetzt ist, wird trotzdem ein neuer Tab geöffnet.

Es gibt einige veraltete Merkmale, die früher UI-Merkmale des geöffneten Fensters steuerten. In modernen Browsern bewirken sie nur, dass ein Popup angefordert wird. Wenn popup nicht angegeben ist und windowFeatures irgendwelche Merkmale (einschließlich nicht erkannter) außer noopener, noreferrer oder attributionsrc enthält, wird das Fenster auch als Popup geöffnet, wenn eine der folgenden Bedingungen zutrifft:

• location und toolbar sind beide false oder nicht vorhanden
• menubar ist false oder nicht vorhanden
• resizable ist false
• scrollbars ist false oder nicht vorhanden
• status ist false oder nicht vorhanden

Andernfalls wird das Fenster als Tab geöffnet.

width oder innerWidth

Gibt die Breite des Inhaltsbereichs an, einschließlich Scrollleisten. Der Mindestwert beträgt 100.

height oder innerHeight

Gibt die Höhe des Inhaltsbereichs an, einschließlich Scrollleisten. Der Mindestwert beträgt 100.

left oder screenX

Gibt die Entfernung in Pixeln von der linken Seite des Arbeitsbereichs an, wie er vom Betriebssystem des Benutzers definiert ist, wo das neue Fenster erzeugt wird.

top oder screenY

Gibt die Entfernung in Pixeln von der oberen Seite des Arbeitsbereichs an, wie er vom Betriebssystem des Benutzers definiert ist, wo das neue Fenster erzeugt wird.

noopener

Wenn dieses Merkmal gesetzt ist, hat das neue Fenster keinen Zugriff auf das ursprungserzeugende Fenster über Window.opener und gibt null zurück.

Wenn noopener verwendet wird, werden nicht-leere Zielnamen, außer _top, _self und _parent, wie _blank behandelt, wenn es darum geht, zu entscheiden, ob ein neuer Browsing-Kontext geöffnet werden soll.

noreferrer

Wenn dieses Merkmal gesetzt ist, lässt der Browser den Referer-Header weg und setzt noopener auf wahr. Siehe rel="noreferrer" für weitere Informationen.

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

Wenn der Browser erfolgreich den neuen Browsing-Kontext öffnet, wird ein `WindowProxy`-Objekt zurückgegeben. Die zurückgegebene Referenz kann verwendet werden, um auf Eigenschaften und Methoden des neuen Kontextes zuzugreifen, solange sie die Sicherheitsanforderungen der Same-Origin-Policy erfüllt.

Wenn der Cross-Origin-Opener-Policy HTTP-Header verwendet wird und die Dokumentrichtlinien so sind, dass das Dokument in einem neuen Browsing-Kontext-Gruppe geöffnet wird, werden Referenzen auf das geöffnete Fenster getrennt und das zurückgegebene Objekt zeigt an, dass das geöffnete Fenster geschlossen ist (closed ist true).

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

Die open() Methode des Window-Interfaces nimmt eine URL als Parameter und lädt die Ressource, die sie identifiziert, in einen neuen oder bestehenden Tab oder ein Fenster. Der target Parameter bestimmt, in welches Fenster oder welchen Tab die Ressource geladen werden soll, und der windowFeatures Parameter kann verwendet werden, um ein neues Popup mit minimalen UI-Funktionen zu öffnen und Größe und Position zu steuern.

Entfernte URLs werden nicht sofort geladen. Wenn window.open() zurückkehrt, enthält das Fenster immer about:blank. Das eigentliche Abrufen der URL wird verzögert und beginnt, nachdem der aktuelle Skriptblock die Ausführung abgeschlossen 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 Benutzereingaben geöffnet werden, und für jeden Window.open()-Aufruf ist ein separates Benutzeraktionsereignis erforderlich. Dies verhindert, dass Websites die Benutzer mit vielen Fenstern überfluten. Dies stellt jedoch eine Herausforderung für Multi-Window-Anwendungen dar. Um dieses Problem zu umgehen, können Sie Ihre Anwendungen so gestalten, dass:

• Sie nicht mehr als ein neues Fenster gleichzeitig öffnen.
• Sie bestehende Fenster zum Anzeigen verschiedener Seiten wiederverwenden.
• Sie Nutzer darüber informieren, wie sie ihre Browsereinstellungen ändern können, um mehrere Fenster zuzulassen.

Alternativ zeigt das folgende Beispiel, wie man ein Popup öffnet, indem man das popup-Merkmal verwendet.

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.
  // …
}

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

Wenn JavaScript-Unterstützung deaktiviert oder nicht vorhanden ist, erstellt der User Agent entsprechend ein sekundäres Fenster oder rendert die referenzierte Ressource gemäß seiner Handhabung des target-Attributs. Das Ziel und die Idee sind, den Benutzern eine Möglichkeit zu bieten (und nicht aufzuzwingen), die referenzierte Ressource zu öffnen.

HTML

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

JavaScript

let windowObjectReference = null; // global variable
function 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();
  },
  false,
);

Der obige Code löst einige Usability-Probleme im Zusammenhang mit Links, die Pop-ups öffnen. Der Zweck von event.preventDefault() im Code ist es, die Standardaktion des Links abzubrechen: Wenn der Ereignislistener für click ausgeführt wird, besteht keine Notwendigkeit, die Standardaktion des Links auszuführen. Wenn die JavaScript-Unterstützung im Browser des Benutzers deaktiviert oder nicht vorhanden ist, wird der Ereignislistener für click ignoriert und der Browser lädt die referenzierte Ressource im Zielrahmen oder -fenster mit dem Namen "WikipediaWindowName". Wenn kein Rahmen oder Fenster den Namen "WikipediaWindowName" hat, erstellt der Browser ein neues Fenster mit diesem Namen.

Die Verwendung von "_blank" als Wert für das target-Attribut führt dazu, dass mehrere neue und unbenannte Fenster auf dem Desktop des Benutzers erstellt werden, die nicht recycelt oder wiederverwendet werden können. Versuchen Sie, einen sinnvollen Namen für Ihr target-Attribut 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 (was den Prozess für den Benutzer beschleunigt) und somit den Grund (und die Benutzer-Systemressourcen, Zeitaufwand) für das Erstellen eines sekundären Fensters rechtfertigt. Die Verwendung eines einzigen target-Attributwerts und dessen Wiederverwendung in Links ist viel benutzerressourcenfreundlicher, da dadurch nur ein einziges sekundäres Fenster erstellt wird, das recycelt wird.

Hier ist ein Beispiel, in dem ein sekundäres Fenster geöffnet und für andere Links wiederverwendet werden kann:

HTML

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

JavaScript

let windowObjectReference = null; // global variable
let 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();
    },
    false,
  );
}

Wenn der neu geöffnete Browsing-Kontext nicht denselben Origin teilt, kann das öffnende Skript nicht mit dem Inhalt des Browsing-Kontextes interagieren (weder lesen noch schreiben).

// Script from example.com
const otherOriginContext = window.open("https://example.org");
// example.com and example.org are not the same origin

console.log(otherOriginContext.origin);
// DOMException: Permission denied to access property "origin" on cross-origin object

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

console.log(sameOriginContext.origin);
// https://example.com

Für weitere Informationen siehe den Artikel zur Same-Origin-Policy.

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

• Moderne Browser bieten eine Popup-Blockierungsfunktion.
• Moderne Browser bieten Tab-Browsing, und Benutzer von tabfähigen Browsern ziehen es vor, in den meisten Situationen neue Tabs zu öffnen statt neue Fenster.
• Benutzer können integrierte Browsereinstellungen oder Erweiterungen verwenden, um auszuwählen, ob ein Link in einem neuen Fenster, im selben Fenster, in einem neuen Tab, im gleichen Tab oder im Hintergrund geöffnet werden soll. Wenn man das Öffnen auf eine bestimmte Weise erzwingt, indem man window.open() verwendet, wird dies die Benutzer verwirren und ihre Gewohnheiten ignorieren.
• Popups haben keine Menüleiste, während neue Tabs die Benutzeroberfläche des Browserfensters verwenden; daher ziehen viele Benutzer Tab-Browsing vor, weil die Oberfläche stabil bleibt.

Vermeiden Sie <a href="#" onclick="window.open(…);"> oder <a href="javascript:window\.open(…)" …>.

Diese falschen href-Werte verursachen unerwartetes Verhalten beim Kopieren/Wechseln von Links, Öffnen von Links in einem neuen Tab/Fenster, beim Lesezeichen setzen oder wenn JavaScript geladen, mit Fehlern ausgeführt wird oder deaktiviert ist. Sie vermitteln auch falsche Semantik an unterstützende Technologien, wie Screenreader.

Verwenden Sie bei Bedarf ein <button>-Element. Allgemein gilt: Sie sollten nur einen Link zur Navigation zu einer echten URL verwenden.

Kennzeichnen Sie Links, die neue Fenster öffnen, so, dass sie die Navigation für Benutzer erleichtern.

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

Der Zweck besteht darin, Benutzer auf Kontextänderungen hinzuweisen, um die Verwirrung auf Seiten der Benutzer zu minimieren: Das Ändern des aktuellen Fensters oder das Erzeugen neuer Fenster kann für Benutzer sehr verwirrend sein (bei einem Popup wird keine Toolbar bereitgestellt, die eine "Zurück"-Schaltfläche hat, um zum vorherigen Fenster zurückzukehren).

Wenn extreme Kontextänderungen explizit identifiziert werden, bevor sie auftreten, können die Benutzer entscheiden, ob sie fortfahren möchten, oder sie können sich auf die Änderung vorbereiten: Nicht nur, dass sie nicht verwirrt oder desorientiert werden, erfahrenere Benutzer können besser entscheiden, wie solche Links geöffnet werden (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 / WCAG verstehen, Leitfaden 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

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