How can I get Iframe event before load?

Question

In my site, I use an iframeA in an iframeB, and, when the iframeA changes it's content I have to set the src. I can set it only with the onload event, but this called when the site is loaded. I am looking for some event or trigger, that helps me detect the location/src change before it starts loading. I don't want to wait the whole page load, before the src set. I have no direct access to iframeA (just the script below)

Some code:

var myframe = document.getElementById('frameB').contentWindow.document.getElementById('frameA');
myframe.onload=function (funcname) {...};

Answer 1

I think adding inline onload attribute with appropriate event handler to iframe tag will solve your problem.

function onIframeLoad(){
   //Write your code here
}

Markup change

<iframe src='..' onload='onIframeLoad()' />

Answer 2

Check this gist or my answer to this question. The code there does exactly that:

function iframeURLChange(iframe, callback) {
    var unloadHandler = function () {
        // Timeout needed because the URL changes immediately after
        // the `unload` event is dispatched.
        setTimeout(function () {
            callback(iframe.contentWindow.location.href);
        }, 0);
    };

    function attachUnload() {
        // Remove the unloadHandler in case it was already attached.
        // Otherwise, the change will be dispatched twice.
        iframe.contentWindow.removeEventListener("unload", unloadHandler);
        iframe.contentWindow.addEventListener("unload", unloadHandler);
    }

    iframe.addEventListener("load", attachUnload);
    attachUnload();
}

It utilizes the unload event. Whenever a page is unloaded, a new one is expected to start loading. If you listen for that event, though, you will get the current URL, not the new one. By adding a timeout with 0 milliseconds delay, and then checking the URL, you get the new iframe URL.

However, that unload listener is removed each time a new page is loaded, so it must be re-added again on each load.

The function takes care of all that, though. To use it, you only have to do:

iframeURLChange(document.getElementById("myframe"), function (url) {
    console.log("URL changed:", url);
});

Answer 3

What will be changing the source of the iframe? If you have access to that code then you can do whatever is in your onload function then.

If a link has it's target attribute set to the iframe and that is how the source is changing then you can hi-jack the link clicks:

$('a[target="frameB"]').bind('click', function () {
    //run your onload code here, it will run as the iframe is downloading the new content
});

Also, just a side-note, you can bind an event handler for the load event in jQuery like this:

$('#frameB').bind('load', function () {
    //run onload code here
});

UPDATE

SITE -> frameB -> frameA

$("#frameB").contents().find("#frameA").bind('load', function () {
    //load code here
});

This selects the #frameB element (that is in the current top level DOM), gets it's contents, finds the #frameA element, and then binds an event handler for the load event.

Note that this code must be run after #frameB is loaded with the #frameA element already present in it's DOM. Something like this might be a good idea:

$('#frameB').bind('load', function () {
    $(this).contents().find('#frameA').bind('load', function () {
        //run load code here
    });
});

UPDATE

To hi-jack links in the #frameB element:

$('#frameB').contents().find('a[target="frameA"]').bind('click', function () {
    /*run your code here*/
});

This will find any link in the #frameB element that has its target attribute set to frameA and add a click event handler.

And again, this will only work if the #frameB iframe element has loaded (or atleast gotten to the document.ready event) so you can select it's elements.

Answer 4

You could also try taking the approach of detecting when your iframe is going to leave its current location. This may be useful in some situations. To do this, put the following code in you iFarme source.

$(window).on('beforeunload', function () {

alert('before load ...');

});