Diskussion zum Problem der Initialisierung von Iframe-Knoten

Heute fiel mir plötzlich ein, die Produktionsprinzipien von Rich-Text-Editoren noch einmal durchzugehen. Also fing er ohne weiteres damit an. Da ich vor einem Jahr einen einfachen Rich-Text-Editor geschrieben habe, habe ich immer noch einen gewissen Eindruck davon. Aber als ich den von mir geschriebenen Code ausführte, stieß ich auf ein Problem:

Code kopieren

Der Code lautet wie folgt:

var ifr = document.createElement('iframe');
ifr.Breite = 300;
ifr.höhe = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = "ein";
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
Dokument.Body.AnhängenUntergeordnetesElement(ifr);

Sehen Sie sich den obigen Code an. Haben Sie Auslassungen gefunden?

Ich denke, wenn es keine Freunde gibt, die ähnliche Erfahrungen gemacht haben wie ich, werden sie wahrscheinlich nicht erkennen, was mit diesem Code nicht stimmt. Dann kannst Du auch gleich eine Runde laufen gehen, vielleicht findest Du das Problem ja bald.

Lassen Sie mich die Antwort unten verraten:

Dieser Code löst eine Ausnahme aus, wenn das Objekt nicht gefunden wird. Welches Objekt kann nicht gefunden werden? Dokumentobjekt nicht gefunden, was? Wie kann es sein, dass das Dokumentobjekt nicht gefunden werden kann? Natürlich ist dieses Dokumentobjekt das Dokumentobjekt des Iframes. Jeder, der schon einmal mit Rich Text gearbeitet hat, weiß, dass Sie zuerst das Dokumentobjekt des Iframes abrufen müssen, bevor Sie es als bearbeitbar festlegen können. Aber warum können wir das Dokumentobjekt nicht abrufen? Ich will Sie hier nicht auf die Folter spannen. Lassen Sie mich Ihnen von meinem Lösungsprozess erzählen.

Ich ging zunächst zu Google und stellte fest, dass der Weg, auf dem ich das Dokument erhalten hatte, der richtige war. Dann habe ich mich gefragt, ob es an Chrome lag? Ist es möglich, dass Chrome diese beiden Objekte nicht unterstützt? Also bin ich auf Firefox umgestiegen. Das Ergebnis ist immer noch dasselbe. Dann liegt das Problem mit Sicherheit an Ihrem eigenen Code.

Als ich später den Code im Internet verglich, stellte ich fest, dass die Position meines appendChild etwas falsch war, also verschob ich es nach vorne, bis vor den Abruf des Dokumentobjekts:

Code kopieren

Der Code lautet wie folgt:

var ifr = document.createElement('iframe');
ifr.Breite = 300;
ifr.höhe = 300;
Dokument.Body.AnhängenUntergeordnetesElement(ifr);
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = "ein";
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body></body></html>');

Dadurch lief alles reibungslos. Anschließend habe ich den Fehler analysiert. Tatsächlich ist das Prinzip hinter diesem Fehler sehr einfach. Jeder weiß, dass ein Iframe tatsächlich ein anderes Dokument enthält und dieses Dokument erst nach seiner Initialisierung ein Dokumentobjekt haben kann. Wenn das Iframe-Element nicht zum DOM-Baum hinzugefügt wird, wird das Dokument im Iframe nicht initialisiert. Daher ist der contentDocument-Wert, den wir zu Beginn unseres Codes in der ifr-Variable erhalten haben, null, was bedeutet, dass das Dokument im Iframe zu diesem Zeitpunkt nicht initialisiert ist.

Dieser Zeile folgend habe ich die Initialisierung anderer Knoten überprüft und festgestellt, dass andere Elementknoten nach ihrer Erstellung ihre eigenen Eigenschaften und Methoden haben, unabhängig davon, ob sie zum DOM-Baum hinzugefügt werden. Das heißt, iframe ist ein Ausreißer unter vielen Elementknoten.

<<: CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

>>: Analyse der Gründe, warum MySQL-Felddefinitionen nicht null verwenden sollten

VMware12 installiert die Desktopversion von Ubuntu19.04 (Installations-Tutorial)

Diskussion zum Problem der Initialisierung von Iframe-Knoten

VMware12 installiert die Desktopversion von Ubuntu19.04 (Installations-Tutorial)

Einführung in die Verschachtelungsregeln von HTML-Tags

HTML-Auszeichnungssprache - Tabellen-Tag

Übersicht über die Zeitkonfiguration unter Linux-System

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

6 praktische Tipps für die TypeScript-Entwicklung

Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS

Zusammenfassung zum Hinzufügen von Root-Berechtigungen für Benutzer in Linux

Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers

Zabbix kombiniert mit Bat-Skript, um eine Methode zur Überwachung des Anwendungsstatus mehrerer Anwendungen zu erreichen

Artikel empfehlen

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

CSS3 realisiert den verschiebbaren Zauberwürfel-3D-Effekt

So installieren Sie MySQL und MariaDB in Docker

Verschiedene Transformationseffekte beim Umschalten von HTML-Webseiten

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

So implementieren Sie eine MySQL-Master-Slave-Replikation basierend auf Docker

Beispiel für einen reinen CSS3-Mindmap-Stil

Erste Schritte mit Nginx Reverse Proxy

Detaillierte Erläuterung der MySQL-Methode für verzögerte Replikationsbibliotheken

Verwenden Sie HTML, um eine einfache E-Mail-Vorlage zu schreiben

Zusammenfassung verschiedener MySQL-Installationsmethoden und Konfigurationsprobleme

JavaScript zur Implementierung eines einfachen Karusselldiagramms, umfassendste Codeanalyse (ES5)

Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten

Tutorial zur Installation von VMware WorkStation 14 Pro unter Ubuntu 17.04

CSS-Syntax für Tabellenränder