Detailed explanation of the difference between iframe and frame_javascript skills

Let’s get straight to the point, what everyone needs to pay attention to : HTML5 no longer supports the use of frames, iframes only have the src attribute

1. Advantages and disadvantages of using iframe

Advantages:

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

Disadvantages:

　1.iframe has disadvantages: styles/scripts require additional links, which will increase requests. In addition, using js to prevent hotlinking can only prevent thieves, but not big thieves.
2. Fortunately, iframe can display all the original web pages intact, but if it is used on the homepage, it is the most annoying to search engines. Then even if your website is good, it will not be ranked well! If it is For dynamic web pages, it’s better to use include! But you must remove his 100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30eb2386ffb911b14667cb8f0f91ea547a76c04bd5ca3fcae76e30b72ad730ca86d tag!
3. The frame structure can sometimes be confusing, especially when up, down, left and right scroll bars appear in multiple frames. In addition to taking up the already limited space on the page, these scroll bars also distract the visitor's attention. Visitors who encounter this kind of site tend to turn around and leave immediately. They'll figure that since your homepage is so cluttered, maybe the rest of the site isn't worth reading. (My point here is that scroll bars should not appear in sub-frames, and the scroll bars of the window can only be controlled by the main page)
4. Link navigation questions. When using a frame structure, you must ensure that all navigation links are configured correctly, otherwise it will cause a lot of trouble for visitors. For example, if the linked page appears within a navigation frame, the visitor is stuck because there is no other place to go.
5. Calling an external page requires additional calls to css, which brings additional requests to the page;

2. Why use iframe less

iframes provide a simple way to embed content from one website into another website. But we need to use iframe carefully. The creation of iframes is 1-2 orders of magnitude slower than the creation of other DOM elements including scripts and css.

Pages that use iframes generally do not contain too many iframes, so the time spent creating DOM nodes does not account for a large proportion. But it brings some other problems: onload event and connection pool.

1.Iframes block page loading

It is very important to trigger the onload event of window in time. The onload event triggers to stop the browser's "busy" indicator, telling the user that the current web page has been loaded. When the onload event is delayed, it gives the user the feeling that the web page is very slow.

The onload event of window will not be triggered until all iframes are loaded (including the elements inside). In Safari and Chrome, this blocking situation can be avoided by dynamically setting the iframe's SRC via JavaScript.

2. The only 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 to a domain name (hostname) at the same time. This number limit has been increased in newer versions of the browser. Safari 3 and Opera 9 can open 4 connections to a domain name at the same time, and Chrome 1, IE 8 and Firefox 3 can open 6 connections at the same time. You can view the specific data sheet through this article: Roundup on Parallel Connections.

Some people may hope that iframe will have its own independent connection pool, but this is not the case. In most browsers, the main page and the iframes within it share these connections. This means that the iframe may use up all available connections when loading resources, thus blocking the loading of the main page resources. This is of course good if the content in the iframe is more important than the content of the main page. But usually, the content in the iframe is not as important as the content of the main page. At this point it's not worth it to run out of available connections in the iframe. One solution is to dynamically set the SRC of the iframe after the important elements on the main page are loaded.

The top 10 websites in the United States all use iframes. Mostly, they use it to load ads. This is understandable and a logical solution, with an easy way to load ad serving. But remember, iframes can take a toll on your page performance. Whenever possible, don't use iframes. Use them sparingly when absolutely necessary.

3. The difference between iframe and frame

1. Frame cannot be used alone without frameSet, iframe can;
2. The frame cannot be placed in the 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. The iframe nested in the frameSet must be placed in the body;
It can be displayed normally as follows:

<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> 

如下不能正常显示：

<!--<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、不嵌套在frameSet中的iframe可以随意使用；

如下均可以正常显示：

<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、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：

<!--<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、如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个(firefox已经改进，这个问题已经不存在了)；使用两个以上的frame在IE和firefox中均可正常

小结：

Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。 frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架 Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入 的744a36ce5a80811620fd656a5a6732af47339a95073fc7313e65a7a8ddc71270所包含的内容与整个页面是一个整体，而a6b59115af808fdb3d02f302deb8ef36f9b0513b6ff359fbfea4dc7aef959a5a所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内 容的代码。