iframe .load event not firing

Question

I am trying to reload an iframe like the following:

var frameObject = $('#myFrame');
var frameAsInDom = frameObject[0].contentWindow;
var currenctLocation = frameAsInDom.location;
frameObject.attr('src', 'about:blank');
frameObject.contents().remove(); // This was a desperate statement!!
frameObject.attr('src', currentLocation).load(function(){
   alert('iframe reloaded');
});

The problem is the iframe's .load event is not getting triggered at all. I am not getting the alert inside the load call back.

Answer 1

duh!! javascript error.. currentLocation is undefined. typo on var currenctLocation

working demo

Answer 2

You are mixing the binding and triggering of the event,

See this code: http://jsfiddle.net/BvQuk/1/

HTML

<iframe id="myFrame" src="http://google.com"&gt;&lt;/iframe&gt;&lt;br/&gt;
<input id="uxButton" type="button" value="Reload the frame" />

JS

$(document).ready(function() {
    var iFrame = $('#myFrame');

    iFrame.bind('load', function() { //binds the event
        alert('iFrame Reloaded');
    });

    $('#uxButton').click(function() {
        alert('onButtonClick OR onBeforeReload');
        var newSrc = iFrame.attr('src') + '?c=' + Math.random(); //force new URL
        iFrame.attr('src', newSrc); //changing the src triggers the load event
    });

});

Hope that helps.