Document.open() — Methode · JavaScript-Referenz

Signatur

Document.prototype.open()

Beschreibung

document.open() bereitet ein Dokument darauf vor, dass mit document.write() bzw. document.writeln() neuer Inhalt hineingeschrieben wird. Dabei wird der gesamte bisherige Inhalt entfernt, alle am Dokument und an seinen Knoten registrierten Event-Listener werden gelöscht, und ein neuer HTML-Parser wird gestartet. Abgeschlossen wird der Vorgang mit document.close(). Erst dann feuern DOMContentLoaded und load für den neuen Inhalt.

Heute kommt die Methode fast nur noch in Sonderfällen zum Einsatz: wenn Inhalt in ein frisch erzeugtes <iframe> oder in ein mit window.open() geöffnetes leeres Fenster geschrieben werden soll (z. B. für Druckvorschauen, Sandbox-Vorschauen oder Legacy-Code). Für normale DOM-Änderungen solltest du createElement(), append(), replaceChildren() oder DOMParser verwenden.

Wichtig ist der Zeitpunkt: Wird open() aus einem Inline-Skript aufgerufen, während das Dokument noch geparst wird, bewirkt es nichts (daher überschreibt document.write() beim Laden den Inhalt nicht). Wird es dagegen nach dem Laden aufgerufen – etwa in einem Klick-Handler –, löscht es die komplette Seite. document.write() ruft open() übrigens automatisch auf, wenn kein Parser offen ist, was häufig zu versehentlich gelöschten Seiten führt.

Es gibt zusätzlich eine Form mit drei Argumenten (url, name, features). Sie verhält sich genauso wie window.open() und gibt ein WindowProxy statt eines Dokuments zurück.

Parameter

Name	Typ	Default	Beschreibung
$type	string	"text/html"	Historisch der MIME-Typ des zu schreibenden Inhalts. Moderne Browser ignorieren dieses Argument, es wird immer HTML geschrieben.
$replace	string		Historisch `"replace"`, damit kein neuer Eintrag im Verlauf entsteht. Laut aktuellem Standard wird es ignoriert, es entsteht nie ein neuer Verlaufseintrag.
$url	string		Nur bei der Form mit drei Argumenten: die URL, die wie bei `window.open()` geladen werden soll.
$name	string		Nur bei der Form mit drei Argumenten: Name des Zielfensters bzw. Browsing-Kontexts (z. B. `"_blank"`).
$features	string		Nur bei der Form mit drei Argumenten: Fenstereigenschaften wie bei `window.open()`, z. B. `"popup,width=400,height=300"`.

Rückgabewert

Typ

Document | WindowProxy | null

Beschreibung

Mit null bis zwei Argumenten: dasselbe Document-Objekt (this), was Verkettungen wie doc.open().write(...) möglich macht. Mit drei Argumenten: das WindowProxy des geöffneten Fensters oder null, wenn das Öffnen blockiert wurde.

Beispiele

Inhalt in ein neues iframe schreiben

const iframe = document.createElement('iframe');
document.body.append(iframe);

const doc = iframe.contentDocument;
doc.open();
doc.write('<!DOCTYPE html><html><head><title>Vorschau</title></head>');
doc.write('<body><h1>Hallo aus dem iframe</h1></body></html>');
doc.close(); // Parser beenden, load-Event feuert

console.log(doc.querySelector('h1').textContent);

Hallo aus dem iframe

Druckansicht in einem leeren Fenster erzeugen

const printReport = (rows) => {
  const win = window.open('', '_blank', 'width=600,height=400');
  if (!win) {
    console.warn('Popup wurde blockiert');
    return;
  }
  const doc = win.document;
  doc.open();
  // Nutzerdaten escapen, um XSS zu vermeiden
  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
  doc.write('<!DOCTYPE html><title>Bericht</title><ul>');
  rows.forEach((r) => doc.write(`<li>${esc(r)}</li>`));
  doc.write('</ul>');
  doc.close();
  win.addEventListener('load', () => win.print());
};

document.querySelector('#print').addEventListener('click', () => {
  printReport(['Umsatz: 1.200 €', 'Kosten: 800 €']);
});

Fallstrick: open() nach dem Laden löscht die Seite

window.addEventListener('load', () => {
  document.body.addEventListener('click', () => console.log('Klick'));

  setTimeout(() => {
    document.open();          // alter Inhalt und alle Listener sind weg
    document.write('<p>Neue Seite</p>');
    document.close();
    console.log(document.body.innerHTML);
  }, 1000);
});

<p>Neue Seite</p>

Verkettung und Form mit drei Argumenten

// Rückgabewert ist das Dokument selbst → Verkettung möglich
const frame = document.createElement('iframe');
document.body.append(frame);
frame.contentDocument.open().write('<p>Kurzform</p>');
frame.contentDocument.close();

// Drei Argumente: verhält sich wie window.open()
const popup = document.open('https://example.com/', '_blank', 'popup');
console.log(popup === null ? 'blockiert' : 'Fenster geöffnet');

Fenster geöffnet

// Wichtig · Fallstricke

Kompletter Datenverlust: Wird open() nach dem Laden aufgerufen, gehen DOM-Inhalt, Event-Listener und Formularzustände verloren. Globale JavaScript-Variablen bleiben in modernen Browsern dagegen erhalten, weil dasselbe Window-Objekt weiterverwendet wird.
Während des Parsens wirkungslos: Innerhalb eines Inline-Skripts, das gerade vom Parser ausgeführt wird, kehrt open() sofort zurück und verändert nichts.
Ausnahmen: Bei XML-/XHTML-Dokumenten wird ein InvalidStateError ausgelöst. Ein SecurityError kommt, wenn das Dokument einen anderen Ursprung hat (Same-Origin-Policy, z. B. bei fremden iframes). Auch während Custom-Element-Reaktionen ist der Aufruf nicht erlaubt.
URL-Änderung: Nach aktuellem Standard übernimmt das geöffnete Dokument die URL des aufrufenden Dokuments. Ältere Browser verhielten sich hier anders.
Immer close() aufrufen: Ohne document.close() bleibt der Parser offen, der Lade-Indikator dreht weiter, und load feuert nicht.
Sicherheit (XSS/CSP): Alles, was du danach mit write() schreibst, wird als HTML interpretiert und enthaltene Skripte werden ausgeführt. Ungeprüfte Nutzereingaben müssen deshalb escaped oder bereinigt werden. Mit einer CSP require-trusted-types-for 'script' verlangt document.write() ein TrustedHTML-Objekt. Für isolierte Vorschauen ist ein <iframe sandbox srcdoc=\"…\"> meist die sicherere Wahl.
Kompatibilität: Die Methode wird von allen Browsern unterstützt, gilt aber als Altlast. Die Argumente type und replace werden ignoriert. Chrome blockiert in manchen Fällen per document.write() eingefügte fremde Skripte (bei langsamen Verbindungen).

Siehe auch

Document.append() Document.clear() Document.close() Document.prepend() Document.write() Blob.textStream() new Magnetometer()