JS checks whether IFRAME is successfully loaded

In a project, you often need to dynamically add IFRAME, and then perform related operations on the added IFRAME. In most cases, IFRAME has not been added yet.CodeThe execution has been completed, so some things you have written are not displayed at all. At this time, we need to consider whether we can wait until the IFRAME is loaded and then perform the following operations. Of course, various browsers have long been taken into consideration for us. See the following:

IE browser

Each ELEM node of IE has an onreadystatechange event, which is triggered every time the ELEM content sends a change,For example, if the content is loading, it will be triggered after the content is loaded, and if the content is loaded successfully, complete will be triggered,This function also needs to work with readystate, which is an attribute of each ELEM on IE and used to view the status of each trigger.

// Add an onreadystatechangeiframe for IFRAME first. attachevent ("onreadystatechange", function () {// This event is also triggered when the content is not loaded, so we need to determine the status // sometimes it will be a strange readystate status and will skip the complete, so we also need to determine the loaded status if (IFRAME. readystate = "complete" | IFRAME. readystate = "loaded") {// the code can be executed here, indicating that the loading has been completed successfully. // you need to clear the event IFRAME. detachevent ("onreadystatechange", arguments. callee); // here is the callback function }});
 

Other browsers (Firefox, opera, chrome, etc.)

In other non-ie browsers, IFRAME, such as Firefox, opera, and chrome, will have an onload event. If this event is triggered, the name content has been loaded.

IFRAME. addeventlistener ("LOAD", function () {// the code can be executed here, indicating that the load has been completed successfully. This. removeeventlistener ("LOAD", arguments. call, false); // The callback function}, false );
 

Overall

 
If (IFRAME. attachevent) {IFRAME. attachevent ("onreadystatechange", function () {// This event is also triggered when the content is not loaded, so we need to determine the status // sometimes it will be a strange readystate status and will skip the complete, so we also need to determine the loaded status if (IFRAME. readystate = "complete" | IFRAME. readystate = "loaded") {// the code can be executed here, indicating that the loading has been completed successfully. // you need to clear the event IFRAME. detachevent ("onreadystatechange", arguments. callee); // here is the callback function});} else {IFRAME. addeventlistener ("LOAD", function () {// the code can be executed here, indicating that the load has been completed successfully. This. removeeventlistener ("LOAD", arguments. call, false); // The callback function}, false );}
 

Note:The above function must be placed after IFRAME is appended to the body, otherwise it will not be triggered

Reprinted from http://blog.csdn.net/huang100qi/article/details/7852377#reply