Discussion on the problem of iframe node initialization

Today I suddenly thought of reviewing the production principles of rich text editors. So without further ado, he started doing it. Since I wrote a simple rich text editor a year ago, I still have some impression of it. But when I ran the code I wrote, I found a problem:

Copy code

The code is as follows:

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);

Look at the code above, have you found any omissions?

I think if there are no friends who have similar experiences as me, they probably won’t be able to see what’s wrong with this code. Then you might as well go for a run, maybe you will find the problem soon.

Let me reveal the answer below:

This code will throw an exception if the object is not found. Which object can't be found? Can't find document object, what? How is it possible that the document object cannot be found? Of course, this document object is the document object of the iframe. Anyone who has worked with rich text knows that you must first obtain the document object of the iframe before you can set it to be editable. But why can't we get the document object? I won’t keep you in suspense here. Let me tell you about my solution process.

First I went to Google and found that the way I got the document was correct. Then I wondered if it was because of Chrome? Is it possible that Chrome doesn't support these two objects? So I switched to Firefox. The result is still the same. Then it is certain that the problem lies in your own code.

Later, by comparing the code on the Internet, I found that the position of my appendChild was a bit wrong, so I moved it forward to before getting the document object:

Copy code

The code is as follows:

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>');

As a result, everything ran smoothly. Then I analyzed the error. In fact, the principle behind this error is very simple. Everyone knows that an iframe actually contains another document, and this document can only have a document object after it is initialized. If the iframe element is not added to the DOM tree, the document in the iframe will not be initialized. Therefore, in the beginning of our code, the contentDocument value we obtained in the ifr variable is null, which means that the document in the iframe is not initialized at this time.

Following this line, I checked the initialization of other nodes and found that once other element nodes are created, they will have their own properties and methods regardless of whether they are added to the DOM tree. That is to say, iframe is an outlier among many element nodes.

<<: CSS3 custom scroll bar style::webkit-scrollbar sample code detailed explanation

>>: Analysis of the reasons why MySQL field definitions should not use null

Detailed tutorial on how to publish springboot projects through docker plug-in in IDEA

Discussion on the problem of iframe node initialization

Detailed tutorial on how to publish springboot projects through docker plug-in in IDEA

Introduction and examples of hidden fields in HTML

A brief discussion on the invalidation or implicit conversion of MySQL integer and string indexes

Pure CSS to modify the browser scrollbar style example

How to run Python script on Docker

How to track users with JS

Implementation of a simplified version of JSON.stringify and its six major features explained in detail

Two simple ways to remove text watermarks from web pages

Docker deployment of Flask application implementation steps

mysql5.7 create user authorization delete user revoke authorization

Recommend

Reflection and Proxy in Front-end JavaScript

Summary of new usage of vi (vim) under Linux

WeChat applet wxs date and time processing implementation example

Summary of CSS usage tips

Detailed explanation of Vue's list rendering

A few steps to easily build a Windows SSH server

Docker cross-server communication overlay solution (Part 1) Consul single instance

Mysql multi-condition query statement with And keyword

CSS to achieve scrolling image bar example code

8 commands to effectively manage processes in Linux

How to use JS WebSocket to implement simple chat

MySQL index for beginners

A method of hiding processes under Linux and the pitfalls encountered

js to achieve a simple lottery function

Tutorial on configuring and using i3 window manager in Linux