iframe node initialization
This time I will bring you the node initialization of iframe. What are the precautions for iframe node initialization? . The following is a practical case, let’s take a look.
Today I suddenly wanted to review the production principles of rich texteditor. So I started doing it step by step without saying a word. Because I wrote a simple rich text editor a year ago, I probably still have some impressions. But when I ran the code I wrote, I found a problem:
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); Everyone, take a look at the above code, have you found any mistakes?
I think if there are no children's shoes who have had similar experiences to me, they probably won't be able to see what's wrong with this code. So 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 that the object cannot be found. Which object cannot be found? The document object cannot be found, 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 done rich text knows that you must first obtain the document object of the iframe before making it editable. But why can't we get the document object? I won’t be too pretentious here. Let me talk about my solution process.
First of all, I went to Google and found that the way I got the document was correct. Then I wondered if it was Chrome? Doesn't Chrome support these two objects? So I switched to Firefox. The result is still the same. Then what is certain is that it must be a problem with 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 ahead of time to get the document object:
Today I suddenly wanted to review the rich text editor. Production principle. So I started doing it step by step without saying a word. Because I wrote a simple rich text editor a year ago, I probably still have some impressions. But when I ran the code I wrote, I found a problem:
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); Everyone, look at the code above, have you found any mistakes?
I think if there are no children's shoes who have had similar experiences to me, they probably won't be able to see what's wrong with this code. So 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 that the object cannot be found. Which object cannot be found? The document object cannot be found, 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 done rich text knows that you must first obtain the document object of the iframe before making it editable. But why can't we get the document object? I won’t be too pretentious here. Let me talk about my solution process.
First of all, I went to Google and found that the way I got the document was correct. Then I wondered if it was Chrome? Doesn't Chrome support these two objects? So I switched to Firefox. The result is still the same. Then what is certain is that it must be a problem with 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 ahead of time to get the document object:
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 this time. In fact, the reason for 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. And if the iframe element is not added to the DOM tree, the document in the iframe will not be initialized. Therefore, in our code at the beginning, the contentDocument value in the ifr variable we obtained is null, which means that the document in the iframe has not been initialized at this time.
Following this line, I checked the initialization status of other nodes and found that in fact, as long as other element nodes are created, they will have their own attributes and method. In other words, iframe is an outlier among many element nodes.
The results ran smoothly. Then I analyzed the error this time. In fact, the reason for 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. And if the iframe element is not added to the DOM tree, the document in the iframe will not be initialized. Therefore, in our code at the beginning, the contentDocument value in the ifr variable we obtained is null, which means that the document in the iframe has not been initialized at this time.
Following this line, I checked the initialization status of other nodes and found that in fact, once other element nodes are created, they will have their own attributes and methods regardless of whether they are added to the DOM tree or not. In other words, iframe is an outlier among many element nodes.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related Reading:
What are the differences between standard HTML writing and code generated by Dreamweaver
How to use iframe to embed other web pages in the current web page
How to add flash video format (flv, swf) files in html
##How to solve the spacing problem between label and input in Google Browse
How to implement refresh redirection of HTML header tag meta
The above is the detailed content of iframe node initialization. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I crop an IFrame in HTML?
Aug 29, 2023 pm 04:33 PM
Inline frames are called iframes in HTML. A label specifies a rectangular area within the content where the browser can display different documents with scroll bars and borders. To embed another document within the current HTML document, use inline frames. A reference to an element can be specified using the HTMLiframe name attribute. In JavaScript, references to elements are also made using the name attribute. An iframe is essentially used to display a web page within the currently displayed web page. The URL of the document containing the iframe is specified using the "src" attribute. Syntax The following is the syntax of HTML <iframesrc="URL"title="d
Why does iframe load slowly?
Aug 24, 2023 pm 05:51 PM
The reasons for slow loading of iframes mainly include network delay, long resource loading time, loading order, caching mechanism and security policy. Detailed introduction: 1. Network delay. When the browser loads a web page containing an iframe, it needs to send a request to the server to obtain the content in the iframe. If the network delay is high, the time to obtain the content will increase, resulting in slow loading of the iframe. ; 2. When the resource loading time is long, the size of the resource is large or the server response time is long, the loading speed will be more obviously slower; 3. Loading sequence, etc.
What to do if the dynamic link library initialization routine fails
Dec 29, 2023 am 10:30 AM
Solution: 1. Reinstall the application; 2. Repair or reinstall the DLL; 3. System restore or checkpoint recovery; 4. Scan using System File Checker (SFC); 5. Check startup items and services; 6. Use Tools; 7. Check official documentation or forums; 8. Consider security software; 9. Check the event viewer; 10. Seek expert help, etc.
What does data-id in iframe mean?
Aug 28, 2023 pm 02:25 PM
The data-id in an iframe refers to a custom attribute used in HTML tags to store the identifier of a specific element. By using the data-id attribute, you can add a unique identifier to the iframe element so that it can be manipulated and accessed in JavaScript. The naming of the data-id attribute can be customized according to specific needs, but some naming conventions are usually followed to ensure its uniqueness and readability. The data-id attribute can also be used to identify and manipulate a specific iframe.
How to initialize the computer in win7
Jan 07, 2024 am 11:53 AM
The win7 system is a very excellent high-performance system. During the continuous use of win7, many friends are asking how to initialize the computer in win7! Today, the editor will bring you how to restore the factory settings of a win7 computer. Related information on how to initialize the computer in win7: Detailed instructions with pictures and text. Steps: 1. Open the "Start Menu" and enter. 2. Click to enter the settings at the bottom of the left side. 3. In the Win10 update and recovery settings interface, select. 4. Click below "Remove all content and reinstall Windows". 5. You can see the following "Initialization" settings, and then click. 6. Enter the "Your computer has multiple drives" setting option. There are two options here, you can choose according to the situation.
What are the loading events of iframe?
Aug 28, 2023 pm 01:55 PM
The loading events of iframe include onload event, onreadystatechange event, onbeforeunload event, onerror event, onabort event, etc. Detailed description: 1. onload event, specifying the JavaScript code to be executed after loading the iframe; 2. onreadystatechange event, specifying the JavaScript code to be executed when the iframe state changes, etc.
Fix Unable to initialize graphics system error on PC
Mar 08, 2024 am 09:55 AM
Many gamers have encountered the frustrating issue of the game failing to initialize the graphics system. This article will delve into the common reasons behind this problem and find simple yet effective solutions that will get you back on the board and beating the level in no time. So, if you are getting Unable to initialize graphics system error message in Rollercoaster Tycoon, Assassin’s Creed, Tony Hawk’s Pro Skater, etc., then follow the solutions mentioned in this article. Initialization error Unable to initialize the graphics system. Graphics cards are not supported. Fix the Unable to initialize the graphics system error message To resolve the Unable to initialize the graphics system error in games like Rollercoaster Tycoon, Assassin's Creed, Tony Hawk's Pro Skater, etc., you can try the following workarounds: Update your graphics card driver in Compatibility Mode
How to reset win7 network settings
Dec 26, 2023 pm 06:51 PM
The win7 system is a very excellent high-performance system. Recently, many friends of the win7 system are looking for how to initialize the network settings in win7. Today, the editor will bring you the details of win7 computer network initialization. Let’s take a look at the tutorial. Detailed tutorial on how to initialize network settings in win7: Graphical steps: 1. Click the "Start" menu, find and open the "Control Panel", and then click "Network and Sharing Center". 2. Then find and click "Change Adapter Device". 3. Next, in the window that opens, right-click "Local Area Connection" and then click "Properties". 4. After opening it, find "Internet Protocol Version (TCP/IPv4)" and double
