CODEWITHSUNDEEP
jqueryeventsiframe
ggutenberg
ggutenberg

Reputation: 7360

jQuery Event when New Page Loads in iFrame

I'm trying to set up an event on the parent that gets triggered when an iframe loads a new page (likely via the user clicking a link).

HTML:

<iframe name="posts" id="posts" src="edit.php">

JS:

$(document).ready(function() {
    $('iframe#posts').live('load', function() {
        console.log('live');
    });
});

The problem is that the console.log() statement never gets triggered. How can I achieve what I'm trying to do?

Upvotes: 2

Views: 3642

Answers (3)

Sue
Sue

Reputation: 21

The way I use is

<iframe onload="hide_html_player_contents_loading();" ...../>

Upvotes: 2

mdarwi
mdarwi

Reputation: 933

The easiest way to fix your problem is to have your iframe created with jQuery as well.

$(document).ready(function() {
    $("<iframe />").attr({
        id: "posts",
        src: "edit.php"
    }).load(function() {
        console.log('live');
    }).appendTo("body");

This question has been asked here before.

Upvotes: 2

Dan
Dan

Reputation: 11069

My best guess is that the 'load' event on the iframe has fired before the 'ready' event on the document, which means that the handler is installed too late. You may have to use the old-fashioned onload in the iframe element itself.

Or you could just put the $('iframe#posts').live() snippet in a top-level script rather than in the ready handler.

Upvotes: 1

Related Questions