Ausführungseinschränkungen in asynchron geladenen Skripten: Grundlegendes zu den Einschränkungen von document.write()

Der Versuch, aus einem asynchron geladenen Skript in ein Dokument zu schreiben, führt zu einer Erhöhung eine Konsolenmeldung: „Fehler beim Ausführen von ‚Schreiben‘ für ‚Dokument‘: Es ist nicht möglich, aus einem asynchron geladenen externen Skript in ein Dokument zu schreiben, es sei denn, es wird explizit geöffnet.“ Diese Meldung kann trotz des erwarteten Verhaltens des Skripts erscheinen und Entwickler verwirren.

Warum die Einschränkung besteht

Asynchron geladene Skripte werden oft ausgeführt, nachdem das Dokument analysiert wurde und geschlossen. Folglich wird die Verwendung von document.write() aus solchen Skripten problematisch, da das Dokument nicht mehr zum Schreiben geöffnet ist.

Lösung: Explizite DOM-Manipulation

Anstelle der Verwendung von document .write() müssen Entwickler das DOM in asynchron geladenen Skripten explizit manipulieren. Dazu gehört das Erstellen von DOM-Elementen und deren Einfügen in das gewünschte übergeordnete Element mithilfe von Methoden wie .appendChild(), .insertBefore() oder dem Setzen von .innerHTML.

Beispiel: DOM-Manipulation

Betrachten Sie zur Veranschaulichung das folgende Inline-Skript:

In einem asynchron geladenen Skript könnte dieser Code ersetzt werden durch:

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

Alternativ könnte der folgende vereinfachte Code verwendet werden, da der Container leer ist:

var container = document.getElementById("container");
container.innerHTML = 'Hello';

Durch die Übernahme dieser DOM-Manipulationstechniken können Entwickler effektiv aus asynchron geladenen Skripten in Dokumente schreiben und so die Einschränkungen umgehen durch document.write() auferlegt.