The iframe tag can create an embedded frame in the web page, which calls the content of another web page document by specifying the src attribute. Like frameset, it is used to split the web page structure to keep some parts of the web page public, but compared with frameset's framework structure splitting the entire web page, iframes are more flexible and can be embedded anywhere on the web page. Due to this feature of iframe usage, it has been widely used in some web pages, which has also led to some inappropriate abuse. Web design will analyze several common ways to use the iframe web element.
- Making a refresh-free response page component as a solution for asynchronous exchange of data. This is an alternative method to send requests asynchronously without using Ajax in the early days. By setting an invisible iframe element on the page and pointing its src attribute to the page address where the request needs to be sent, the request can be sent. In the same domain, the returned page can be dom parsed to obtain data. Another advantage is that it bypasses the sandbox security model of ajax and can successfully send cross-domain requests to obtain data, but in this case, the document object of the iframe cannot be retrieved. Because of its characteristic, it is still applicable in some web pages that require cross-domain requests. This kind of refresh-free means that the parent page does not refresh during the data exchange process and continues to respond to user operations. The actual data exchange is locked by the iframe page embedded on the parent page. This embedded iframe page can be set to be visible or invisible as needed and will not affect the response of other elements in the parent page to the user. This effect is similar to the refresh-free of ajax, but it can be seen that its mechanism is completely different. Even though gmail is a model for ajax applications, it combines many iframes to achieve its superior performance and user experience.
- A way to optimize a page. Use iframes to load scripts in parallel to solve the loading problems of slow-loading third-party content such as icons and ads. Google's advertising platform adsense means using iframe to share revenue on users' websites. You can also see this kind of technology by viewing and analyzing the advertising codes on the homepage of the domestic portal. You can also use a hidden iframe to preload larger files to cache when the network is under low network pressure, so that other pages can use it. The concept of preload can be analyzed using firebug for Google homepage. You can see in the body tag:
onload=document.fqfocus();if(document.images)new image().src= '/images/nav_logo4.png '
With such a code, the loaded image nav_logo4.png is not used on the homepage, but when using this image on other pages such as search result list, you only need to read it from the cache and don't need to download it again.
- As a hack method for the floating layer in the ie6 browser to block select controls and flash elements. In the web2.0 era, lightbox (or thickbox) technology has become a popular effect with its good experience and fresh visual experience. This technology actually uses an absolutely positioned floating layer to cover the original page to present text information, pictures, forms or any other arbitrary page elements, replacing the way in early web development that pop-up browser windows or browsers' own messages and input controls are often used to interact with users. In the old ways, scripts that pop up new windows are often intercepted by the browser's ad blocking system, and the browser's own message controls are criticized by user experience researchers because they interrupt the browser's process, resulting in the entire page and other web pages browsing through multiple tags being locked. As a front-line web front-end developer with strict requirements on yourself, you will definitely encounter this problem in the process of implementing the lightbox effect. The absolute positioning layer cannot cover the select controls and flash on the web page in ie6, and even if the style is set to a higher z-index value, it will be useless. This is because the select element is a form-level element in ie6, and its priority is much higher than all other html tags. Only iframes of the same form-level can cover it. Therefore, developers have found that putting the floating layer into an iframe or placing an iframe in the floating layer can solve this problem. Fortunately, this problem has been corrected in the IE upgrade version after ie6, but for IE6, which still has 50%+ market share (statistics as of the time of publication), this solution is still of practical significance.
In addition to the above three applications, some inappropriate applications are also common for iframe elements. For example, embed too many iframe frames in the page, and update the iframe when clicked by specifying the target attribute of the link tag outside the frame. This usage is similar to frameset, achieving the purpose of sharing navigation. The original intention is good, but there is no doubt about the disadvantages. This will lead to too many requests for a page. The article "Best practices for speeding up your web site" mentioned above clearly states that optimizing pages requires minimizing the number of iframes, and summarizes three disadvantages:
- Even if the content is empty, it will cause resource loss (including client and server);
- Blocks page onload event triggers (blocks page onload, and it is translated as it will prevent the page from loading, there is doubt here)
- No semantics (seo is an important part of website marketing)
In the next version of html5 of xhtml1.0, there is no support for the frameset tag due to the negative impact on web page availability, which also explains some issues from the side.
In addition, since the embedded iframe cannot automatically adapt to its internal content size, in order to maintain the integrity of the page display, it is also necessary to write a javascript script to instantly adjust its size according to changes in the iframe content. The multiple scattered requests, coupled with the need for javascript scripts to correct, increases the risk of multiple iframe pages running systems. So, is there any good way to keep some page content public? The server side has long provided us with solutions. The include in asp and the require methods in php are all used to include an existing piece of code into the program. This can also enable a certain part of the page (such as navigation menus, footers) to be public. However, after running, it is output as a complete page, effectively reducing client requests, and there is no problem of high adaptability of iframes.
