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
How to run py files directly in linux
1. First create the file (cd to the directory whe...
How to solve jQuery conflict problem
In front-end development, $ is a function in jQue...
jQuery realizes image highlighting
It is very common to highlight images on a page. ...
How to build ssh service based on golang image in docker
The following is the code for building an ssh ser...
A brief discussion on which fields in Mysql are suitable for indexing
Table of contents 1 The common rules for creating...
Detailed explanation of HTML page header code example
Knowledge point 1: Set the base URL of the web pa...
How to deploy LNMP architecture in docker
Environmental requirements: IP hostname 192.168.1...
Introduction and analysis of three Binlog formats in MySQL
one. Mysql Binlog format introduction Mysql binlo...
Vue project packaging and optimization implementation steps
Table of contents Packaging, launching and optimi...
JavaScript to achieve stair rolling special effects (jQuery implementation)
I believe everyone has used JD. There is a very c...
HTML 5 Preview
<br />Original: http://www.alistapart.com/ar...
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...
How to deeply understand React's ref attribute
Table of contents Overview 1. Creation of Refs ob...
Introduction to the use of MySQL performance stress benchmark tool sysbench
Table of contents 1. Introduction to sysbench #Pr...
Detailed explanation of props and context parameters of SetUp function in Vue3
1. The first parameter props of the setUp functio...