Method for determining whether an IFrame is loaded successfully (multiple browsers) based on JS _javascript tips

Recommended reading:

JS iframe load slow how to solve

In the project is often to dynamically add an iframe, and then to add the IFRAME related operations, and often the IFRAME has not yet been added, the following code has been executed, so some of the things you wrote did not show up. At this point, we have to consider whether we can wait for the IFRAME after the completion of the operation of the following, of course, a variety of browsers have been taken into account for us, look at the following:

IE browser

IE each elem node will have a onreadystatechange event, which is triggered every time the Elem content is sent to change, such as the content is loading loading will trigger, the content loaded loaded will trigger, The content load succeeds complete will trigger, this function also needs to cooperate with readystate, this is the property which each elem has on IE, is used to view the state of each trigger.

First add a onreadystatechange
iframe.attachevent ("onreadystatechange") to the IFRAME, function () {
// This event is also triggered when the content is not loaded, so we have to judge the state
//Sometimes it will be weird readyState state will skip complete so we loaded state to Judge
if (iframe.readystate = = "Complete" | | Iframe.readystate = = "Loaded") {
//code can be executed to show here that it has been loaded successfully
//To clear off the event
iframe.detachevent (" onReadyStateChange ", Arguments.callee);
Here is the callback function
}
});

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

In other non-IE browsers firefox,opera,chrome and other IFRAME will have a onload event, this event as long as the trigger said that the content has been loaded.

Iframe.addeventlistener ("Load", function () {
//code can be executed to indicate that it has been loaded successfully
completed This.removeeventlistener ("Load", Arguments.call, false);
Here is the callback function
}, FALSE);

Combine

if (iframe.attachevent) {
iframe.attachevent ("onReadyStateChange", function () {
//This event is also triggered when the content is not loaded. So we have to judge
the state//Sometimes it will be weird readyState state will skip complete so we loaded state also to Judge
if (iframe.readystate = = "complete" | | Iframe.readystate = = "Loaded") {
//code can be executed to show here that it has been loaded successfully
//To clear off the event
iframe.detachevent (" onReadyStateChange ", Arguments.callee);
Here is the callback function
}}
)
; else{
iframe.addeventlistener ("Load", function () {
//code can execute to here the description has been loaded successfully completed
This.removeeventlistener ("Load", Arguments.call, false);
Here is the callback function
}, false);

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

The above content is small made up to you to tell us the JS to determine whether the success of the method of IFrame loading, we hope to help!