How to determine whether iframe is successfully loaded Based on JS (multiple browsers)

This article mainly describes how to determine whether iframe is successfully loaded Based on JS [multiple browsers]. If you need more information, please refer to the following:

How to solve the slow loading of JS iFrame

In a project, you often need to dynamically add iframe and then perform related operations on the added iframe. In most cases, if the iframe has not been added, the code behind it has been executed, so some things you write 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 will have an onreadystatechange event, which is triggered every time the elem content sends a change. For example, if the content is being loaded, loading is triggered, and the content is loaded, loaded is triggered, when the content is loaded successfully, complete is triggered. This function also needs to be used with readyState. This is an attribute of each elem on ie and is 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

The above content is a small series of JS methods to determine whether iframe is successfully loaded. I hope it will help you!

For more articles about how to determine whether iframe is successfully loaded Based on JS (multiple browsers), refer to PHP!