How to wait for iframe to load in javascript

In JavaScript, there are several common methods to wait for the iframe content to load, including the load event, the DOMContentLoaded event, and polling the document.readyState property. Below is a detailed explanation and examples of these methods:

Using the load Event

The load event is triggered after all content within the iframe (including images, script files, etc.) has loaded. Listening to the iframe's load event is the simplest and most direct method:

javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    console.log('Iframe completely loaded');
    // Perform other operations here
};

Alternatively, use the addEventListener method:

javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    console.log('Iframe completely loaded');
    // Perform other operations here
});

Using the DOMContentLoaded Event

If you only care about the iframe's document content (excluding resources like images), you can use the DOMContentLoaded event. This event is triggered immediately after the document is fully loaded and parsed, without waiting for stylesheets, images, or subframes to load.

javascript
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.addEventListener('DOMContentLoaded', function() {
        console.log('Iframe DOM content loaded');
        // Perform other operations here
    });
});

Polling document.readyState

If the above events are not suitable for your specific scenario (e.g., you cannot guarantee setting up the event listener before DOMContentLoaded is triggered), you can also check the iframe's document.readyState property by polling:

javascript
var iframe = document.getElementById('myIframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

function checkIframeLoaded() {
    // Check if the iframe's document has loaded
    if (iframeDocument.readyState === 'complete' || iframeDocument.readyState === 'interactive') {
        console.log('Iframe content loaded');
        // Perform other operations here
    } else {
        // If not loaded, check again
        setTimeout(checkIframeLoaded, 100);
    }
}

checkIframeLoaded();

Summary

Depending on your specific requirements, you can choose to listen for the load event to wait for all resources to load, or use the DOMContentLoaded event to wait for the DOM content to render, or continuously poll the document.readyState property to determine the loading state. In practical applications, you can select the most appropriate method based on the specific content within the iframe and the timing of the operations you wish to perform.

iFrames can dynamically load elements, and the best approach is to use recursion:

javascript
$('iframe').ready(function() {
  var triggerMeAgainIfNeeded = function() {
    setTimeout(function() {
      var neededElm = $('.someElementThatLoadedAfterIframe');
      if (neededElm.length > 0) {
        // perform your required task
      } else {
        triggerMeAgainIfNeeded();
      }
    }, 10);
  }
});

First, you should modify the src attribute of the iframe, not the location. Second, attach the load event of the iframe to execute the changes:

javascript
var myIframe = document.getElementById('righttop');
myIframe.addEventListener("load", function() {
  this.contentWindow.document.notesform.ID_client.value = Client;
});
myIframe.src = 'timesheet_notes.php';

Finally, this assumes you are referring to an iframe, not a frameset.