Discussion on the problem of iframe node initialization

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

Recommend

A quick solution to the automatic line break problem of table header in responsive framework

I've been using Bootstrap to develop a websit...

Solution to the error when importing MySQL big data in Navicat

The data that Navicat has exported cannot be impo...

How to use SVG icons in WeChat applets

SVG has been widely used in recent years due to i...

Instances of excluding certain libraries when backing up the database with mysqldump

illustrate: Using mysqldump –all-databases will e...

Introduction to Computed Properties in Vue

Table of contents 1. What is a calculated propert...

Introduction to the graphic composition and typesetting capabilities of web design

Everything needs a foundation. To build a house, ...

Two ways to prohibit clearing the input text input cache in html

Most browsers will cache input values ​​by defaul...

MySQL Installer 8.0.21 installation tutorial with pictures and text

1. Reason I just needed to reinstall MySQL on a n...

Mysql transaction concurrency problem solution

I encountered such a problem during development A...

Detailed explanation of the use of nohup /dev/null 2>&1

nohup command: If you are running a process and y...

vue+node+socket io realizes multi-person interaction and releases the entire process

1. Background 1. The front end uses vue + vuex + ...

HTTP Status Codes

This status code provides information about the s...

Native js imitates mobile phone pull-down refresh

This article shares the specific code of js imita...

27 Linux document editing commands worth collecting

Linux col command The Linux col command is used t...

Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine

1. On a networked machine, use the default centos...