Discussion on iframe node initialization

Time:2020-5-29

Today, I want to review the principle of rich text editor. So he did it without saying anything. Because I wrote a simple rich text editor a year ago, I still have some impression. But when I ran the code, 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);

Take a look at the above code. Do you find any batch leaks?

I don’t think I can see any problem in this code without children’s shoes with similar experience. Then you may as well run, maybe you will find out the problem soon.

Let me reveal the answer:

This code throws an exception that does not find the object. Which object could not be found? Document object not found, what? How could the document object not be found? Of course, this document object is the document object of iframe. Anyone who has done rich text knows that the document object of iframe must be obtained before it can be set as editable. But why can’t we get the document object? I’m not selling here. Let me talk about my solution process.

First of all, I went to Google and found that there was no mistake in the way I got the document. And then I wonder if it’s Chrome? Does chrome wind not support these two objects? So I switched to Firefox. The result is the same. So what is certain is that it must be its own code problem.

Later, by comparing the code on the Internet, I found that my appendChild’s location was a bit wrong, so I advanced it to the front of 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 went well. Then I analyzed the mistake. In fact, the principle of this mistake is very simple. We all know that iframe actually contains another document, and this document can only have a document object after initialization. If the iframe element is not added to the DOM tree, the document in iframe will not be initialized. Therefore, in our code at the beginning, the contentdocument value in the IFR variable we get is null, which means that the document in iframe is not initialized at this time.

Following this line, I checked the initialization of other nodes and found that as long as other element nodes are created, they will have their own attributes and methods no matter whether they are added to the DOM tree or not. That is to say, iframe is a different kind among many element nodes.

Recommended Today

The way of nonlinear optimization

Mathematical knowledge 1、 Nonlinear functionLinear function is another name of a function of first degree, then nonlinear function means that the function image is not a function of a straight line.Nonlinear functions include exponential function, power function, logarithmic function, polynomial function and so on. 2、 Taylor expansion1. Taylor formula:Taylor’s formula is to add a_ The […]