Signatur
Beschreibung
Die Methode open() des Window-Interface lädt eine angegebene Ressource in einen neuen oder bestehenden browsing context (also einen Tab, ein Fenster oder ein iframe) unter einem angegebenen Namen.
Die Methode open() des Window-Interface nimmt eine URL als Parameter entgegen und lädt die dadurch identifizierte Ressource in einen neuen oder bestehenden browsing context. Der Parameter target bestimmt, in welches Fenster, welchen Tab oder welchen Frame die Ressource geladen werden soll, und der Parameter windowFeatures kann verwendet werden, um Eigenschaften des neuen Fensters zu steuern, wie beispielsweise ob es sich um einen Tab oder ein Popup mit minimalen UI-Funktionen handelt, seine Größe und Position und so weiter.
Wenn window.open() einen neuen browsing context erzeugt (d.h. wenn kein bestehendes Fenster mit diesem Namen gefunden wird), enthält das Fenster zunächst about:blank. Wenn eine andere URL angegeben wurde, wird sie asynchron geladen, und das globale Objekt wird für diese Navigation wiederverwendet, sofern sie same-origin ist – daher können Eigenschaften, die vor dem Laden auf dem Fenster gesetzt wurden, bestehen bleiben. Wenn target auf ein bestehendes Navigable verweist (_self, _parent, _top oder ein bekannter Fenstername), tritt keine about:blank-Phase auf – der Browser navigiert direkt den bestehenden Kontext.
Moderne Browser haben strenge Popup-Blocker-Richtlinien. Popup-Fenster müssen als direkte Antwort auf eine Benutzereingabe geöffnet werden, und für jeden Aufruf von Window.open() ist eine separate Benutzergeste erforderlich. Dies verhindert, dass Websites Benutzer mit vielen Fenstern belästigen. Dies stellt jedoch ein Problem für Multi-Window-Anwendungen dar. Um diese Einschränkung zu umgehen, können Sie Ihre Anwendungen so gestalten, dass:
- Nicht mehr als ein neues Fenster gleichzeitig geöffnet wird.
- Bestehende Fenster wiederverwendet werden, um verschiedene Seiten anzuzeigen.
- Benutzer darauf hingewiesen werden, wie sie ihre Browsereinstellungen aktualisieren können, um mehrere Fenster zuzulassen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $url | string | — | Ein String, der die URL oder den Pfad der zu ladenden Ressource angibt. Wenn ein leerer String ("") angegeben oder dieser Parameter weggelassen wird, wird eine leere Seite in den anvisierten browsing context geladen. |
| $target | string | — | Ein String ohne Leerzeichen, der den Namen des browsing context 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 (Standard), _parent, _top und _unfencedTop können ebenfalls verwendet werden. _unfencedTop ist nur für fenced frames relevant. Dieser Name kann als target-Attribut von <a>- oder <form>-Elementen verwendet werden. |
| $windowFeatures | string | — | Ein String mit einer kommaseparierten Liste von Fenster-Features in der Form name=value. Boolesche Werte können auf true gesetzt werden mit einem der folgenden: name, name=yes, name=true oder name=n, wobei n eine beliebige Ganzzahl ungleich null ist. Unterstützte Optionen sind u.a. popup (fordert ein minimales Popup-Fenster an), width/innerWidth, height/innerHeight (Größe des Inhaltsbereichs, Minimum 100), left/screenX, top/screenY (Position in Pixeln), noopener (das neue Fenster hat keinen Zugriff auf das Ursprungsfenster über Window.opener) und noreferrer (der Browser lässt den Referer-Header weg und setzt noopener auf true). Ein null-Wert wird gleich dem leeren String ("") behandelt. |
Rückgabewert
WindowProxy-Objekt zurückgegeben. Die zurückgegebene Referenz kann verwendet werden, um auf Eigenschaften und Methoden des neuen Kontexts zuzugreifen, sofern sie die Sicherheitsanforderungen der same-origin policy erfüllt. Wird der Cross-Origin-Opener-Policy-HTTP-Header verwendet und die Document Policies führen dazu, dass das Dokument in einer neuen browsing context group geöffnet wird, werden Referenzen auf das geöffnete Fenster gekappt 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 context nicht öffnen kann, zum Beispiel weil er durch einen Popup-Blocker blockiert wurde.Beispiele
Einen neuen Tab öffnen
window.open("https://www.mozilla.org/", "mozillaTab");Ein Popup öffnen
window.open("https://www.mozilla.org/", "mozillaWindow", "popup");Größe und Position des Popups steuern
const windowFeatures = "left=100,top=100,width=320,height=320";
const handle = window.open(
"https://www.mozilla.org/",
"mozillaWindow",
windowFeatures,
);
if (!handle) {
// Das Fenster durfte nicht geöffnet werden
// Dies wird wahrscheinlich durch integrierte Popup-Blocker verursacht.
// …
}Alternativen bereitstellen, wenn JavaScript deaktiviert ist (JavaScript)
let windowObjectReference = null; // globale 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();
});Bestehende Fenster wiederverwenden (JavaScript)
let windowObjectReference = null; // globale Variable
let previousURL; /* globale Variable, die die URL speichert,
die sich aktuell im Sekundärfenster befindet */
function openRequestedSingleTab(url) {
if (windowObjectReference === null || windowObjectReference.closed) {
windowObjectReference = window.open(url, "SingleSecondaryWindowName");
} else if (previousURL !== url) {
windowObjectReference = window.open(url, "SingleSecondaryWindowName");
/* Wenn die zu ladende Ressource unterschiedlich ist,
laden wir sie in das bereits geöffnete Sekundärfenster und holen
dieses Fenster dann wieder in den Vordergrund vor sein Elternfenster. */
windowObjectReference.focus();
} else {
windowObjectReference.focus();
}
previousURL = url;
/* Erklärung: Wir speichern die aktuelle URL, um die URL
bei einem weiteren Aufruf dieser Funktion vergleichen zu können. */
}
const links = document.querySelectorAll(
"a[target='SingleSecondaryWindowName']",
);
for (const link of links) {
link.addEventListener("click", (event) => {
openRequestedSingleTab(link.href);
event.preventDefault();
});
}Same-origin policy – Fehlerhaftes Beispiel
// Skript von example.com
const otherOriginContext = window.open("https://example.org");
// example.com und example.org sind nicht same-origin
console.log(otherOriginContext.origin);
// DOMException: Permission denied to access property "origin" on cross-origin objectSame-origin policy – Korrektes Beispiel
// Skript von example.com
const sameOriginContext = window.open("https://example.com");
// Diesmal hat der neue browsing context denselben origin
console.log(sameOriginContext.origin);
// https://example.com// Wichtig · Fallstricke
top, left) und Dimensionswerte (width, height) in windowFeatures werden korrigiert, wenn einer dieser angeforderten Werte nicht zulässt, dass das gesamte Browser-Popup innerhalb des vom Betriebssystem definierten Arbeitsbereichs für Anwendungen gerendert wird. Mit anderen Worten: Kein Teil des neuen Popups kann anfangs außerhalb des Bildschirms positioniert werden. Aus Barrierefreiheitsgründen sollte window.open() vermieden werden; nutzen Sie stattdessen <button> statt inline onclick=\"window.open(…)\" in HTML.