The iframe tags in HTML are both useful.

The iframe tags in HTML are both useful.

In my daily front-end development, the iframe tag does not appear many times. As a very old tag (excellent browser compatibility), it is necessary to understand its typical application scenarios.

 

(Image Description: all browsers support iframe, No matter what version)

 

Under what circumstances should I use iframe? In fact, iframe has many clever usage, but one of the most important features is:<Iframe> provides a sandbox environment isolated from the current window of the browser, which is equivalent to another window opened inside the webpage. <Iframe> external css/javascript does not affect the style or DOM in <iframe>. At the same time, <iframe> internal css/javascript does not affect <iframe> external styles and DOM. Therefore, iframe can be used to reference webpages outside the site. It is often used in CMS systems, Rich Text editors, and other scenarios.

 

Our commonly used online execution of front-end code site, such as http://jsfiddle.net/, as well as the novice commonly used http://www.w3school.com.cn/inside the "try" function, is actually using the <iframe> label to achieve. Let's take w3school as an example.

 

On the left-side editing page, click Submit code to view the results on the right. Imagine that the "view results" area on the right is an iframe that provides an environment isolated from the current webpage. Otherwise, the <p> label background is set to red on the left side. If there is no iframe, the p element on the entire webpage may change to red.

 

We can view the source code of the webpage to see how the page works. I removed some unnecessary code and html tags. The core part is as follows:

The execution process is as follows:

1. the user clicks the submit button to execute the submitTryIt function.

2. In the submitTryIt function, obtain the value of the html area (that is, the area edited by the user) and assign the value to the hidden transit area.

3. submitTryIt executes the form submission operation (I .e., the submit function) to transfer the content in the hidden transit area (that is, the content of the Area edited by the user) to the background interface v. asp.

4. What is returned after the form is submitted to the v. asp link? In fact, there is no processing, and the returned results are unblocked. For example:

5. At this time, you must be wondering why the returned content is effective in the "view results" area (in iframe? Note that the <form> tag has a target = "I" attribute, while the <iframe> tag also has an attribute named name = "I ", both of them are called the letter "I", which is not written by the author. This means that the form is submitted, and the returned results are submitted to the window with the target value as name. For the target value of form, see here: http://www.w3school.com.cn/tags/att_form_target.asp. This explains why the returned content can be displayed in iframe. Because of the isolation of iframe, No matter what code you submit, it can only affect the areas in iframe, but not the other parts on the page.

 

At the end of this article, by the way, since iframe has such a good isolation, what should I do if I really want to communicate with the content in iframe or other interactions? If you are interested, please investigate it ~Postmessage