jQuery iframe load() event?

Question

Does anyone know if there is such a thing?

I have a iframe that's being inserted with $.ajax() and I want to do some stuff after the contents from the iframe are completely loaded:

Click to copy

....
 success: function(html){  // <-- html is the IFRAME (#theiframe)
          $(this).html(html);   // $(this) is the container element
          $(this).show();
          $('#theiframe').load(function(){
             alert('loaded!');
          } 
....

it works, but I see the IFRAME is loaded twice (the alert also shows twice).

Answer 1

use iframe onload event

Click to copy

$('#theiframe').on("load", function() {
    alert(1);
});

Answer 2

If possible, you'd be better off handling the load event within the iframe's document and calling out to a function in the containing document. This has the advantage of working in all browsers and only running once.

In the main document:

Click to copy

function iframeLoaded() {
    alert("Iframe loaded!");
}

In the iframe document:

Click to copy

window.onload = function() {
    parent.iframeLoaded();
}