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?

回答1:

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.

回答2:

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.

回答3:

The way I use is

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

来源：https://stackoverflow.com/questions/4452773/jquery-event-when-new-page-loads-in-iframe