Interview question: If you have used the iframe framework, how much do you know about the advantages and disadvantages of the iframe framework? And due to some shortcomings of iframe, do you know what are the alternatives for this frame at home and abroad?
Knowledge point 1: What are the advantages and disadvantages of the iframe framework?
Advantages :
1. You can request other websites across domains and display the website completely;
2. Typical system structure can improve code reusability;
3. Create a new independent host environment, which can isolate or access native interfaces and objects;
4. Module separation. If multiple pages use the same iframe, it is easy to modify. If the webpage has the same header and version in order to unify the style, it can be written as a page and nested with iframe, which can increase the reusability of the code ;
5. A solution to realize the display of advertisements. If you encounter slow-loading third-party content, such as icons or advertisements, these problems can be solved by iframe;
6. If you need to refresh the iframe, you only need to refresh the frame, not the entire page;
7. When reloading the page, there is no need to reload the entire page, only one frame of the page needs to be reloaded, which reduces data transmission and improves the download speed of the web page.
shortcoming:
1. The iframe will block the Onload event of the main page, and the window.onload event will be triggered after the iframe is loaded; the iframe and the main page share the link pool, and the browser has restrictions on the links of the same city, so it will affect the parallel loading of the page; Before using iframe, you need to consider these two disadvantages. If you need to use iframe, it is best to dynamically add the src attribute value to the iframe through Javascript, which can bypass the above two problems;
2. It is not conducive to SEO, the code is complicated, and the crawlers of search engines cannot interpret the iframe page;
3. A new page is loaded, and requests for css and js files are added, that is, additional http requests are added, which increases the burden on the server, which is not advisable for large websites;
4. Many mobile devices cannot fully display the frame, and the device compatibility is poor
5. Sometimes the iframe has a scroll bar due to the space occupied by the page, causing the layout to be confusing
6. The back button of the browser is not available;
7. It is troublesome to debug the page style, there will be multiple scroll bars, and multiple pages will be generated, which is not easy to print;
Knowledge point 2: an alternative to the iframe framework?
1. Use the object tag instead
We can embed external resources in web pages using the object tag in HTML. We can use tags to display another webpage within our webpage. The object tag is a replacement for the iframe tag in HTML. We can use tags to embed different multimedia components such as images, videos, audios, etc. The object tag has an attribute data where we can define the URL of the webpage to embed. We can even set the width and height of the container using the width and height properties.
<object data="https://www.baidu.com"
width="800"
height="800"
type="text/html">
</object>2. Use the embed tag instead
The embed tag is similar to the object tag and serves the same purpose, we can use the object tag to embed various external resources in our web pages. We can embed media such as PDFs, images, audio, video and web pages. Tags define a container in which we can embed the content we want. The object tag is a self-closing tag. We can use the src attribute to specify the URL of the web page to embed. This tag has a type attribute to specify the type of content to embed. We can define height and width similarly, same as object tag. Note: The embed tag can be used in flash files or in the case of unsuccessful use of video javelin. It is not compatible with mobile terminals and only supports PC terminals.
<embed type="video/webm" src="video.mp4" width="10" height="10">3. Use the video tag instead
If the video is loaded, you can use the video tag instead. The video tag is compatible with mobile and PC, and supports Ogg\MPEG4\WebM three formats of video
<video width="10" height="10" controls>
<source src="movie.mp4" type="movie/mp4">
<source src="movie.ogg" type="movie/ogg">
</video>4. Difference
1) embed is a media player for non-IE browsers;
2) The object tag is generally used in IE, and non-IE rarely supports object;
3) Object and embed appear at the same time, in order to be compatible with different browsers;
4) video is a new standard from html5, but not all browsers support it;
5) Although video claims to support three media types, only mp4 is commonly used.
Object and embed have a feature that they cannot be dynamically rendered, so they cannot be loaded through jQuery to manipulate the dom. To change the data, you can filter it again to achieve the effect.