Question

I have an iframe loaded dynamically with jQuery like this

jQuery('<iframe id="myFrame" src="iframesrc.php"></iframe>').load(function(){
    // do stuff when loaded
}).prependTo("#myDiv");

And I want to catch the reload event every time the inner frame is reloaded. I tried this:

jQuery('body').on('load', '#myDiv', function() {
    alert('iframe loaded');
});

But I’m not getting any response, both on the initial load and when following links inside the iframe. What am I doing wrong?

Answer 1

You are looking for the load action of a div in your example above, not the iframe. Try:

$("#myFrame").on("load", function () {
    alert("Hi there, hello");
})

Additionally, if you are not using other libraries, use $() to access jQuery as opposed to jQuery()

Also note that any functions that you want to run on your page must be bound to jQuery’s document ready event like so:

$(function () {
    // your code goes here
    $("#myFrame").attr("src", "http://google.com"); // <- this works
})

$("#myFrame").attr("src", "http://google.com"); // <- this does not work