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

Zusammenfassung gängiger SQL-Anweisungen in MySQL

Diskussion zum Problem der Initialisierung von Iframe-Knoten

Zusammenfassung gängiger SQL-Anweisungen in MySQL

So stellen Sie Docker-Containerdaten wieder her

Analysieren Sie die Methode zur Überwachung von Nginx durch Prometheus + Grafana

Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker

So löschen Sie den MySQL 8.0-Dienst vollständig unter Linux

MySQL-Beispiel zur Erläuterung von Einzelzeilenfunktionen und Zeichenmathematik, Datumsprozesssteuerung

Beispielcode zur Implementierung einer Pivot-Tabelle in MySQL/MariaDB

Beispiel für die Implementierung einer Paging-Funktion im Vue-Backend-Verwaltungssystem

Implementierung der Docker-Bereitstellung von ElasticSearch und ElasticSearch-Head

Nginx verwendet ctx, um Datenfreigabe- und Kontextänderungsfunktionen zu realisieren

Artikel empfehlen

Vue+Vant implementiert die obere Suchleiste

Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild

Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)

So richten Sie die Verwendung der chinesischen Eingabemethode in Ubuntu 18.04 ein

Einführung und Analyse von drei Binlog-Formaten in MySQL

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS

Wird der veraltete Docker durch Podman ersetzt?

Eine detaillierte Einführung in die drei Installationsmethoden von RPM, Yum und Quellcode unter Linux

Eine kurze Erläuterung der Verwendung von GROUP BY und HAVING in SQL-Anweisungen

Transplantieren des Befehls mkfs.vfat in Busybox unter Linux

Zwei Möglichkeiten zum Implementieren einer HTML-Seite: Klicken Sie auf „Datei herunterladen“

So erstellen und implementieren Sie ein Node-Projekt mit Docker

JavaScript implementiert das mobile Puzzlespiel mit neun Rastern

Eine kurze Analyse der Unterschiede zwischen Undo, Redo und Binlog in MySQL