UPDATE

Question

156

How can I get Iframe event before load?

rated 0 times [ 160] [ 4] / answers: 1 / hits: 27441 / 13 Years ago, wed, january 18, 2012, 12:00:00

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) {...};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

christianu

Add To Favorites

Follow

Total Points: 481

Total Questions: 124

Total Answers: 99

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

1 Year ago

answered 13 Years ago stefanicarolinat · Accepted Answer

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.