Heute wollte ich plötzlich die Prinzipien der Erstellung eines Rich-Text-Editors überprüfen. Also fing ich an, es Schritt für Schritt zu tun, ohne ein Wort zu sagen. Da ich vor einem Jahr einen einfachen Rich-Text-Editor geschrieben habe, habe ich wahrscheinlich noch einige Eindrücke. Aber als ich den von mir geschriebenen Code ausführte, stellte ich ein Problem fest:
var ifr = document.createElement('iframe');
ifr.width = 300;
var idoc = ifr.contentDocument || ifr .contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write(''); > Schauen Sie sich den Code oben an. Haben Sie Fehler gefunden?
Ich denke, wenn es keine Kinder gibt, die ähnliche Erfahrungen gemacht haben wie ich, werden sie wahrscheinlich nicht erkennen können, was an diesem Code falsch ist. Gehen Sie also genauso gut laufen, vielleicht finden Sie das Problem bald.
Lassen Sie mich die Antwort unten verraten:
Dieser Code löst eine Ausnahme „Objekt nicht gefunden“ aus. Welches Objekt kann nicht gefunden werden? Das Dokumentobjekt kann nicht gefunden werden. Was? Wie kann es sein, dass das Dokumentobjekt nicht gefunden werden kann? Dieses Dokumentobjekt ist natürlich das Dokumentobjekt des Iframes. Jeder, der Rich Text erstellt hat, weiß, dass Sie zunächst das Dokumentobjekt des Iframes abrufen müssen, bevor Sie es bearbeitbar machen können. Aber warum können wir das Dokumentobjekt nicht erhalten? Ich werde hier nicht zu anmaßend sein. Lassen Sie mich über meinen Lösungsprozess sprechen.
Zuerst ging ich zu Google und stellte fest, dass die Art und Weise, wie ich das Dokument erhalten hatte, korrekt war. Dann fragte ich mich, ob es Chrome war? Unterstützt Chrome diese beiden Objekte nicht? Also bin ich auf Firefox umgestiegen. Das Ergebnis ist immer noch das gleiche. Dann ist sicher, dass es sich um ein Problem mit Ihrem eigenen Code handeln muss.
Später, als ich den Code im Internet verglich, stellte ich fest, dass die Position meines appendChild etwas falsch war, also habe ich es vorzeitig verschoben, um das Dokumentobjekt zu erhalten:
Code kopieren
idoc.write('');
Die Ergebnisse liefen reibungslos. Dann habe ich den Fehler dieses Mal analysiert. Tatsächlich ist der Grund für diesen Fehler sehr einfach. Jeder weiß, dass ein Iframe tatsächlich ein anderes Dokument enthält und dieses Dokument erst nach der Initialisierung ein Dokumentobjekt haben kann. Und wenn das iframe-Element nicht zum DOM-Baum hinzugefügt wird, wird das Dokument im iframe nicht initialisiert. Daher ist in unserem Code am Anfang der contentDocument-Wert in der von uns erhaltenen ifr-Variablen null, was bedeutet, dass das Dokument im Iframe zu diesem Zeitpunkt noch nicht initialisiert wurde.
Im Anschluss an diese Zeile habe ich den Initialisierungsstatus anderer Knoten überprüft und festgestellt, dass tatsächlich, sobald andere Elementknoten erstellt wurden, diese über ihre eigenen Attribute und Methoden verfügen, unabhängig davon, ob sie dem DOM-Baum hinzugefügt werden oder nicht. Mit anderen Worten: Iframe ist ein Ausreißer unter vielen Elementknoten.