Detailed description of the differences between iframe and frame, and detailed description of iframeframe

Detailed description of the differences between iframe and frame, and detailed description of iframeframe

When you get started, you must note that HTML5 does not support frame, and iframe only has the src attribute.

I. advantages and disadvantages of using iframe

Advantages:

1. It is convenient for programs to call static pages;
2. Separation of pages and programs;

Disadvantages:

1. iframe: style/script requires additional link to add requests. In addition, js anti-leech protection can only prevent thieves, but not thieves.
2. iframe is good to be able to display all the original web pages intact, but if it is used on the home page, it is the most annoying for search engines. so even if your website is doing well, it cannot rank well! For dynamic web pages, use include! However, the 3. the frame structure is sometimes confusing, especially when the upper and lower, left, and right scroll bars appear in multiple frames. In addition to occupying a very limited page space, these scroll bars also distract visitors. Visitors often turn around and leave the site immediately. They will think that since your home page is so messy, other parts of the site may not be worth reading. (In my opinion, the sub-frame should not contain a scroll bar. the scroll bar of the window can only be controlled by the Home Page)
4. Questions about link navigation. When using the framework structure, you must ensure that all navigation links are correctly configured. Otherwise, it will cause a lot of trouble for visitors. For example, if a linked page appears in the navigation frame, the visitor is trapped because there is no other place to go.
5. To call an external page, you need to call css to add additional requests to the page;

Ii. Why do I use iframe less?

Iframes provides a simple way to embed content from one website into another. However, we need to use iframe with caution. Iframe creation is 1-2 orders of magnitude slower than other DOM elements including scripts and css.

Iframe pages generally do not contain too many iframe, so the time required to create a DOM node does not take a large proportion. But there are some other problems: onload events and connection pools ).

1. Iframes blocks page loading

It is very important to trigger the onload event of the window in time. When the onload event is triggered, the browser's "busy" indicator stops, telling the user that the current webpage has been loaded. When the loading delay of the onload event is reached, the webpage is very slow.

The onload event of window must be triggered after all iframe loads (including the elements. In Safari and Chrome, dynamic setting of iframe SRC through JavaScript can avoid this blocking situation.

2. unique connection pool

The browser can only open a small number of connections to the web server. Older browsers, including Internet Explorer 6 & 7 and Firefox 2, can only open two connections for one domain name (hostname) at the same time. The limit of this quantity is increased in the browser of the new version. Safari 3 + and Opera 9 + can open four connections to a domain name at the same time. Chrome 1 +, IE 8, and Firefox 3 can open six connections at the same time. You can view the specific data table in this article: Roundup on Parallel Connections.

Some may expect iframe to have its own independent connection pool, but this is not the case. In most browsers, the home page shares these connections with iframe. This means that iframe may use up all available connections when loading resources, thus blocking the loading of Home Page resources. If the content in iframe is more important than the content on the home page, this is certainly good. However, in general, the content in iframe is not as important as the content on the home page. In this case, it is not worth using the available connections in iframe. One solution is to dynamically set the SRC of iframe after loading important elements on the home page.

Iframe is used for the top 10 websites in the United States. In most cases, they use it to load ads. This is understandable and a logical solution. It uses a simple method to load advertisement services. But remember, iframe will impact your page performance. If possible, do not use iframe. Use them with caution when necessary.

Iii. Differences between iframe and frame

1. frame cannot be used independently from frameSet, and iframe can;
2. frame cannot be placed in the body;

As shown below:

<!--<body>--><frameset rows="50%,*"><frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <!--<body>--> 

The following cannot be displayed normally:

<body><frameset rows="50%,*"><frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <body> 

3. iframe nested in frameSet must be placed in the body;
As shown below:

<body><frameset> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> </body> 

The following cannot be displayed normally:

<!--<body>--><frameset> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <!--</body>--> 

4. iframe not nested in frameSet can be used at will;

As shown below:

<body><iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </body> <!--<body>--><iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> <!--</body>--> 

5. The frame height can only be controlled by frameSet; iframe can be controlled by itself, but cannot be controlled by frameSet, for example:

<!--<body>--><frameset rows="50%,*"><frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <!--</body>--><body><frameset><iframe height="30%" name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe height="100" name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> </body> 

6. If more than two iframe files are used on the same page, they can be normally displayed in IE, and only the first one can be displayed in firefox (firefox has been improved, this problem does not exist.) use more than two frames in IE and firefox.

Summary:

The functions of Frame and Iframe are basically the same, but Iframe is more flexible than Frame. Frame is the framework of the entire page. iframe is an embedded webpage element. It can also be said that the embedded framework Iframe mark is also called a floating frame mark, you can use it to embed an HTML document into an HTML file for display. The biggest difference between it and Frame tag is that the content embedded in the <Iframe> </Iframe> In the webpage is a whole with the whole page, the content contained in <Frame> </Frame> is an independent entity and can be displayed independently. In addition, the application Iframe can display the same content multiple times on the same page without repeating the content code.

Articles you may be interested in:

• Js implementation of web pages to prevent nesting by iframe framework and the differences between several location. href
• Js communication between the iframe subpage and the parent page in the same domain or different domains
• Obtain the Dom element on the iframe page using Jquery.
• How to Use jquery to implement iframe adaptive height
• How jquery and js call iframe parent window and Child Window Elements
• Example of using schema protocol to call an APP or using iframe to open an APP in iOS
• How to dynamically create and release the memory occupied by iframe
• Disable all js scripts such as alert and pop-up windows on the iframe page.
• PHP + iFrame Implement Asynchronous File Upload without page refreshing