It's straight to the point, everyone needs itPlaces to pay attention to: HTML5 no longer supports using frame, iframe only has src attribute
1. Pros and cons of using iframe
advantage:
1. It is more convenient to call static pages for the program;
2. Separate pages and programs;
shortcoming:
There are some disadvantages: the style/script needs additional links, and the request will be added. In addition, using js anti-theft chain can only prevent thieves and thieves.
Fortunately, it can display all the original web pages intact, but if used on the home page, it is the most annoying thing for search engines. Then even if your website is done well, it will not be ranked well! If it is a dynamic web page, it is better to use include! But his <html><head><title><body> tag must be removed!
3. Frame structure can sometimes make people confused, especially when up and down and left and right scroll bars appear in multiple frames. In addition to squeezing off an already particularly limited page space, these scroll bars will also distract visitors from paying attention. Visitors often turn around and leave immediately when they encounter such a site. They will think that since your homepage is so chaotic, the rest of the site may be even less worth reading. (My opinion here is that there are no scroll bars in the subframe, and the scroll bars of the window can only be controlled by the main page)
4. Link navigation questions. When using the framework structure, you must ensure that all navigation links are configured correctly, otherwise, it will cause great trouble to visitors. For example, if the linked page appears in the navigation framework, the visitor will be trapped because he has no other place to go at this time.
5. When calling an external page, you need to call css, which will bring additional requests to the page;
2. Why use iframes less
iframes provides an easy way to embed the content of one website into another. But we need to use iframes carefully. The creation of iframes is 1-2 orders of magnitude slower than the creation of other DOM elements including scripts and css.
Pages using iframes generally do not contain too many iframes, so the time spent creating a DOM node will not account for a large proportion. But it brings some other problems: onload events and connection pools.
Blocking page loading
It is very important to trigger the onload event of the window in time. The onload event triggers the browser's "Busy" indicator to stop, telling the user that the current web page has been loaded. When the onload event is delayed, it gives the user the feeling that this web page is very slow.
The onload event of the window needs to be fired after all iframes are loaded (including the elements inside). In Safari and Chrome, dynamically setting the SRC of an iframe through JavaScript can avoid this blocking situation.
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 one domain name (hostname). This number limit has been increased in new versions of browsers. 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 table through this article: Roundup on Parallel Connections.
Some people may wish that the iframe will have its own independent connection pool, but that's not the case. Most browsers, the main page and the iframes in it share these connections. This means that the iframe may run out of all available connections when loading the resource, thus blocking the loading of the main page resource. 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 main page. At this time, it is not worth using up all available connections in the iframe. One solution is to dynamically set the SRC of the iframe after the important elements on the main page have been loaded.
All the top 10 websites in the United States use iframes. Most of the time, they use it to load ads. This is understandable and a logical solution to load ad services in an easy way. But remember that iframes will have a shock to your page performance. Don't use iframes whenever possible. Use them with caution when it is really necessary.
3. The difference between iframe and frame
1. The frame cannot be used separately from the frameSet, and the 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="./"/> <frame name="frame2" src="./"/> </frameset> <!--<body>-->
The following cannot be displayed normally:
<body> <frameset rows="50%,*"> <frame name="frame1" src="./"/> <frame name="frame2" src="./"/> </frameset> <body>
3. The iframe nested in the frameSet must be placed in the body;
The following can be displayed normally:
<body> <frameset> <iframe name="frame1" src="./"/> <iframe name="frame2" src="./"/> </frameset> </body>
The following cannot be displayed normally:
<!--<body>--> <frameset> <iframe name="frame1" src="./"/> <iframe name="frame2" src="./"/> </frameset> <!--</body>-->
4. Iframes not nested in frameSet can be used at will;
All of the following can be displayed normally:
<body> <iframe name="frame1" src="./"/> <iframe name="frame2" src="./"/> </body> <!--<body>--> <iframe name="frame1" src="./"/> <iframe name="frame2" src="./"/> <!--</body>-->
5. The height of the frame can only be controlled by frameSet; the iframe can be controlled by itself, but cannot be controlled by frameSet, such as:
<!--<body>--> <frameset rows="50%,*"> <frame name="frame1" src="./"/> <frame name="frame2" src="./"/> </frameset> <!--</body>--> <body> <frameset> <iframe height="30%" name="frame1" src="./"/> <iframe height="100" name="frame2" src="./"/> </frameset> </body>
6. If you use more than two iframes on the same page, it can be displayed normally in IE, and only the first one can be displayed in firefox (firefox has been improved, and this problem no longer exists); using more than two frames can be displayed normally in IE and firefox
summary:
Frame and Iframe can achieve basically the same functions, but Iframe has more flexibility than Frame. The frame is the frame of the entire page, and the iframe is an embedded web page element, or an embedded frame. The Iframe tag is also called a floating frame tag. You can use it to embed an HTML document in an HTML to display. The biggest difference between it and the Frame tag is that the content contained in <Iframe></Iframe> embedded in the web page is a whole with the entire page, while the content contained in <Frame></Frame> is an independent individual and can be displayed independently. In addition, the application Iframe can also display the same content multiple times on the same page without having to repeat the code of this content.