Recommended reading:
How to solve the problem of slow loading of JS iFrame
In the project, you often need to dynamically add iframes and then perform related operations on the added iframes. Often, the subsequent code has been executed before the iframe is added, so some things you write are not displayed at all. At this time, we have to consider whether we can wait until the iframe is loaded before performing the subsequent operations. Of course, various browsers have long considered it for us, see below:
ie browser
Each elem node in IE will have an onreadystatechange event. This event is triggered every time the elem content is sent to change. For example, the content is loaded and loaded after the content is loaded. The content is loaded successfully will be triggered. This function also needs to be coordinated with readyState. This is a property owned by each elem on ie to view the status of each trigger.
//First add an onreadystatechangeiframe.attachEvent("onreadystatechange", function(){//This event will also be triggered when the content is not loaded, so we need to judge the state//Sometimes it is weird and readyState will skip complete. So we also need to judge the loaded state if(iframe.readyState === "complete" || iframe.readyState == "loaded"){//The code can be executed here and it means that the loading has been completed successfully//The event iframe.detachEvent( "onreadystatechange", arguments.callee);//This is the callback function}});Other browsers (Firefox, Opera, Chrome, etc.)
On other non-IE browsers, Firefox, Opera, Chrome and other iframes will have an onload event. As long as this event is triggered, it means that the name content has been loaded.
iframe.addEventListener( "load", function(){//The code can be executed here and it means that the load has been successfully completed. This.removeEventListener( "load", arguments.call, false);//This is the callback function}, false);Let's summarize
if(iframe.attachEvent){iframe.attachEvent("onreadystatechange", function() {//This event will also be triggered when the content is not loaded, so we need to judge the state//Sometimes it is weird and readyState will skip complete. So we also need to judge the loaded state if (iframe.readyState === "complete" || iframe.readyState == "loaded") {//The code can be executed here and it means that the loading has been completed successfully//The event iframe.detachEvent("onreadystatechange", arguments.callee);//This is the callback function}});}else{iframe.addEventListener("load", function() {//The code can be executed here and it means that the load has been successfully completed. This.removeEventListener("load", arguments.call, false);//This 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 the method of JS to determine whether an iframe is loaded successfully by the editor. I hope it will be helpful to everyone!