Heim > Artikel > Web-Frontend > Initialisierung des Iframe-Knotens
Initialisierung des Iframe-Knotens
- php中世界最好的语言Original
- 2018-02-06 10:20:452748Durchsuche
Dieses Mal werde ich Ihnen die Knoteninitialisierung von Iframe vorstellen. Was sind die Vorsichtsmaßnahmen für die Iframe-Knoteninitialisierung?
Heute wollte ich plötzlich die Produktionsprinzipien des 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;
ifr.height = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
document.body.appendChild(ifr);Sehen 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:
Heute habe ich wollte plötzlich das Rich-Text-Produktionsprinzip ü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;
ifr.height = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
document.body.appendChild(ifr);Sehen 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 die Codes im Internet verglich, stellte ich fest, dass die Position meines appendChild etwas falsch war, also habe ich es vorzeitig verschoben, bevor ich das Dokumentobjekt erhielt:
var ifr = document.createElement('iframe');
ifr.width = 300;
ifr.height = 300;
document.body.appendChild(ifr);
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
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. 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.
Nach dieser Zeile habe ich den Initialisierungsstatus anderer Knoten überprüft und festgestellt, dass tatsächlich, sobald andere Elementknoten erstellt wurden, sie ihre eigenen -Attribute und Methoden haben. Mit anderen Worten: Iframe ist ein Ausreißer unter vielen Elementknoten.
Alles verlief 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.
Nach dieser 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.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Was sind die Unterschiede zwischen Standard-HTML-Schreiben und von Dreamweaver generiertem Code?
So verwenden Sie iframe, um andere Webseiten in die aktuelle Webseite einzubetten
So fügen Sie Dateien im Flash-Videoformat (FLV, SWF) in HTML hinzu
So lösen Sie die Beschriftung und den Eingabeabstand Problem in Google Browse
So implementieren Sie die Aktualisierungsumleitung mithilfe von HTML-Header-Tag-Meta
Das obige ist der detaillierte Inhalt vonInitialisierung des Iframe-Knotens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!