Start · Sprachen · JavaScript · Referenz · Document.close()

Document.close()

Methode

Beendet das Schreiben in einen Dokument-Stream, der mit <code>document.open()</code> geöffnet wurde, und lässt den Parser die Seite fertig aufbauen.

seit JavaScript Baseline: alle Browser (DOM Level 1 / HTML Living Kategorie: webapi

Signatur

Document.prototype.close()

Beschreibung

document.close() schließt den Schreib-Stream, den document.open() geöffnet hat oder den ein erster Aufruf von document.write() nach dem Laden der Seite implizit geöffnet hat. Erst danach weiß der HTML-Parser, dass keine weiteren Daten mehr kommen. Er verarbeitet dann den gepufferten Inhalt vollständig, löst DOMContentLoaded und load für das neue Dokument aus und beendet den Ladeindikator des Browsers.

Typischer Einsatz: Inhalte werden dynamisch in ein neu geöffnetes Fenster (window.open()) oder in ein <iframe> geschrieben, etwa für Druckvorschauen, Berichte oder Sandbox-Vorschauen. Ohne abschließendes close() bleibt das Dokument im Zustand „lädt“. Der Lade-Spinner dreht sich dann weiter, und manche Skripte oder Druckdialoge warten ewig auf load.

Die Methode nimmt keine Argumente und gibt nichts zurück. Wurde vorher kein Stream geöffnet, oder handelt es sich um einen vom Parser selbst angelegten Stream (während die Seite normal lädt), passiert nichts.

Beispiele

Druckansicht in neuem Fenster erzeugen

const druckeBericht = (titel, zeilen) => {
  const win = window.open('', '_blank', 'width=600,height=800');
  if (!win) {
    console.warn('Popup wurde blockiert');
    return;
  }
  const doc = win.document;
  doc.open();
  doc.write(`<!DOCTYPE html><html><head><title>${titel}</title></head><body>`);
  doc.write(`<h1>${titel}</h1><ul>`);
  zeilen.forEach((z) => doc.write(`<li>${z}</li>`));
  doc.write('</ul></body></html>');
  doc.close(); // Stream schließen, damit das load-Ereignis feuert

  win.addEventListener('load', () => win.print());
};

druckeBericht('Monatsbericht', ['Umsatz: 12.000 €', 'Kosten: 8.500 €']);

Iframe-Vorschau mit HTML-Code befüllen

const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-same-origin';
document.body.append(iframe);

const zeigeVorschau = (html) => {
  const doc = iframe.contentDocument;
  doc.open();
  doc.write(html);
  doc.close();
  console.log('Status:', doc.readyState);
};

zeigeVorschau('<p style="color:green">Hallo Vorschau</p>');
Status: complete

close() ohne offenen Stream hat keine Wirkung

// Während die Seite normal geladen wurde, gibt es keinen per Skript geöffneten Stream
document.addEventListener('DOMContentLoaded', () => {
  const ergebnis = document.close();
  console.log(ergebnis, document.body !== null);
});
undefined true

// Wichtig · Fallstricke

  • Immer paarweise verwenden: Auf jedes document.open() (oder jedes implizite Öffnen durch document.write() nach dem Laden) muss ein close() folgen. Sonst bleibt readyState auf "loading", und load feuert nie.
  • XML/XHTML: In XML-Dokumenten löst close() einen InvalidStateError (DOMException) aus, genau wie open() und write().
  • Sicherheit (XSS): Das Muster open()/write()/close() fügt rohes HTML ein. Nicht vertrauenswürdige Daten müssen vorher maskiert oder mit einer Bibliothek wie DOMPurify bereinigt werden. Bei Iframe-Vorschauen sandbox ohne allow-scripts nutzen. Strenge Content Security Policies und Trusted Types (require-trusted-types-for 'script') blockieren write() mit einfachen Strings.
  • Same-Origin: Zugriff auf contentDocument bzw. win.document ist nur bei gleichem Ursprung erlaubt, sonst gibt es einen SecurityError.
  • Moderne Alternativen: Meist sind DOM-Methoden (createElement, append), iframe.srcdoc oder Blob-URLs die bessere Wahl. Damit entfällt die Stream-Verwaltung komplett.
  • Die Methode wird in allen Browsern unterstützt.