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

Lösen Sie das Sprungproblem des mobilen Endgeräts (CSS-Übergang, Ziel-Pseudoklasse).

Diskussion zum Problem der Initialisierung von Iframe-Knoten

Lösen Sie das Sprungproblem des mobilen Endgeräts (CSS-Übergang, Ziel-Pseudoklasse).

Lösung für Ubuntu 20.04 Firefox kann keine Videos abspielen (Flash-Plug-In fehlt)

Warum kann das in HTML eingebettete Video im MP4-Format nicht abgespielt werden?

Zusammenfassung der für MySQL erforderlichen allgemeinen Kenntnisse

Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil

Zusammenfassung der Erfahrungen mit der browserübergreifenden Entwicklung (I) HTML-Tags

Einige Erfahrungen zum Aktivieren von HTTPS

Eine kurze Diskussion über die Lösung von Axios zum Entfernen doppelter Anfragen

So ermitteln Sie, ob das Linux-System auf VMware installiert ist

jQuery realisiert den Bildverfolgungseffekt

Artikel empfehlen

Beispiel für eine Routing-Berechtigungsverwaltungsmethode in Vue2/vue3

Easyswoole Ein-Klick-Installationsskript und Pagoden-Installationsfehler

So erstellen Sie Ihre eigene Angular-Komponentenbibliothek mit DevUI

Detaillierte Erläuterung der Lösung für das Problem der automatischen Trennung der xshell-Remoteverbindung

MySQL-Beispiel-Tutorial: Ergebnisse auswählen, um ein Update durchzuführen

Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL

js verwendet Canvas, um mehrere Bilder in einem Implementierungscode zusammenzuführen

Einfaches Anwendungsbeispiel für MySQL-Trigger

Vue implementiert einen vollständigen Prozessdatensatz einer einzelnen Dateikomponente

HTML-Popup-Div ist sehr nützlich, um eine mobile Zentrierung zu realisieren

Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor

MySQL-Datenbank-Grundlagen SQL-Fensterfunktion Beispielanalyse-Tutorial

Beispiel für einen WeChat-Applet-Rechner