Of Stack

Explain the differences between iframe and frame

  • 2020-12-09 00:39:38
  • OfStack

One thing to note: HTML5 no longer supports frame, and iframe only has the src attribute

1. Advantages and disadvantages of using iframe

Advantages:

1. The program is more convenient to load the static page;
2. Separation of pages and programs;

Disadvantages:

1.iframe has a downside: styles/scripts require extra chaining, which increases requests. In addition, js against hotlinking can only prevent thieves, not thieves.
iframe is a great way to display the original web page as it is, but when used on the front page, it is the most annoying thing for search engines. So your website even if do in good, also do not rank good! For dynamic web pages, include is fine! But his must be removed < html > < head > < title > < body > Tag!
3. The frame structure can sometimes be confusing, especially when there are scroll bars up and down and left and right in multiple frames. In addition to crowding out already extremely limited page space, these scrollbars can also distract visitors. Visitors to a site like this tend to walk away. They'll think that if your home page is so cluttered, the rest of the site might be even less worth reading. (My opinion here is that there should be no scrollbars in the sub-frame, and the scrollbars of the window should only be controlled by the main page.)
4. Link navigation questions. When using a frame structure, you must ensure that all navigation links are properly configured, otherwise, it will cause a lot of trouble to visitors. For example, if the linked page appears within the navigation frame, the visitor is stuck because he has no other place to go.
5. To call external pages requires extra call to css, which brings extra request times to the page;

2. Why less iframe

iframes provides an easy way to embed content from one site into another. But we need to use iframe with caution. The creation of iframe is 1-2 orders of magnitude slower than other DOM elements including scripts and css.

Page 1 using iframe generally does not contain much iframe, so the time taken to create the DOM node is not significant. But there are a few other issues: onload events and connection pooling (connection pool).

Iframes blocks page load

It is important that onload events trigger window in a timely manner. The onload event trigger stops the browser's "busy" indicator, telling the user that the current page has been loaded. When the onload event load is delayed, it gives the user the impression that the page is very slow.

The onload event for window needs to be triggered after all iframe loads (including the elements inside). In Safari and Chrome, this blocking can be avoided by dynamically setting SRC of iframe via JavaScript.

2. Only one 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). This limit has been increased with the new version of the browser. Safari 3+ and Opera 9+ can open four connections to one domain at the same time, while Chrome 1+, IE 8 and Firefox 3 can open six simultaneously. You can see the exact table in this article: Roundup on Parallel Connections.

One might expect iframe to have its own separate connection pool, but that's not the case. Most browsers, home pages and iframe share these connections. This means that iframe may have used up all available connections while loading resources, thereby blocking the loading of resources on the home page. If the content in iframe is more important than the content on the home page, that's great. But in general, the content in iframe is not as important as the content on the main page. At this point it is not worth running out of available connections in iframe. One solution is to dynamically set SRC for iframe after the important elements on the home page have been loaded.

iframe is used by the top 10 WEBSITES in the US. In most cases, they use it to load ads. This is understandable and a logical solution, a simple way to load advertising services. Keep in mind, though, that iframe will have an impact on your page performance. Do not use iframe whenever possible. Use them sparingly when you really need them.

3. The difference between iframe and frame

1. frame cannot be used separately from frameSet, but iframe can.
2. frame cannot be put in body;

The following can 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>-->

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 body;
The following can 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>

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 which is not nested in frameSet can be used at will;

The following can be displayed normally: 


<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 height of frame can only be controlled by frameSet; iframe can be controlled by itself, but not by frameSet, such as: 


<!--<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 are used on the same page, it can be displayed normally in IE, but only the first one can be displayed in firefox (firefox has been improved, and this problem no longer exists); Using more than two frame can be normal in BOTH IE and firefox

Summary:

Both Frame and Iframe can perform much the same function, although Iframe has more flexibility than Frame. frame is the frame of the entire page, and iframe is the embedded web page element, or the embedded framework Iframe tag, also known as floating frame tag, which can be used to embed an HTML document in an HTML for display. The biggest difference between it and the Frame tag is that it is embedded in a web page < Iframe > < /Iframe > The content contained with the entire page is 1 as a whole, while < Frame > < /Frame > The content contained is an individual and can be displayed independently. In addition, Iframe allows you to display the same content on the same page multiple times without having to repeat the code.

Related articles: