JQuery onload -.load() - событие не работает с динамически загруженным iframe

My script загружает iframe, когда пользователь нажимает кнопку. Я хочу вызвать другую функцию после загрузки iframe, но она не работает. Iframe действительно загружается нормально, но событие .load() никогда не вызывается после завершения загрузки iframe. IFrame содержит контент с одного и того же веб-сайта (без внешнего содержимого). Странно то, что я использую тот же метод, описанный ниже, в нескольких других пунктах моего кода, и он отлично работает. Может кто-нибудь предложить, что я должен проверить в следующий раз?

Вот соответствующий код:

$('#myIframe').load(function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>'));
});

Ответы

Ответ 1

Кажется несколько похожим на вопрос здесь:

jQuery.ready в динамически вставленном iframe

Таким образом, элемент Iframe существует в Dom с добавлением. Только когда вы установите Url, он загрузится, и к этому моменту вы добавили функцию загрузки, которую вы хотите пометить в конце. Итак, для вашего кода

$('#someButton').live('click', function () {

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
    $('#myIframe').attr('src',"https://www.mywebsite.com");

    $('#myIframe').load(function () {
        alert('iframe loaded');
    });

});

Ответ 2

Причина, по которой ваш пример кода не работает, заключается в том, что вы привязываетесь к элементу, который не существует, а затем помещаем этот элемент в DOM, когда он не имеет обработчика событий, прикрепленного к событию load. Попробуйте следующее:

$('#someButton').live('click', function () {
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function () {
        alert('iframe loaded');
    }).attr('src', 'https://www.mywebsite.com');
    $('body').append($iframe);
});

Или ближе к вашему исходному коду, вы можете заменить .load() на .live('load'):

$('#myIframe').live('load', function () {
    alert('iframe loaded');
});

$('#someButton').live('click', function () {
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary
});

Ответ 3

Попробуйте следующее:

$("<iframe id='myId'></iframe>").appendTo("body")
    .attr('src', url)
    .load(function() 
     {
         callback(this);
     });

Просто добавил цепочку, создав элемент, в котором обычно идет селектор (это возможно), и приложил его к телу.

Ответ 4

Если документ, который вы загружаете в iframe, вы контролируете, попробуйте поместить обработчик нагрузки в этот документ. Если вам нужен родительский документ, чтобы что-то сделать после загрузки iframe, вы можете вызвать функцию в родительском элементе из дочернего элемента:

// in parent doc
function myIframeLoaded() {
   // do something
}

// in iframe doc
$(document).load(function() {   // or .ready()
   parent.myIframeLoaded();
}