jQuery .ready для динамически подгружаемого iFrame

Вопрос

Я использую jQuery, чтобы отобразить iFrame, когда кто-то кликает на картинке.

Проблема в том, что $(document).ready в iFrame срабатывает слишком рано, ещё до того, как загрузится контент страницы. Похоже, что $(document).ready в iFrame вообще использует соответствующую функцию своего родителя, когда определяет, что страница загружена.

Пока что я решил поступить следующим образом:

$(document).ready(function() { setTimeout(ApplyGalleria, 100); });

Как видите, решение основано на таймере и, следовательно, не очень надёжное, ведь не факт, что за 100 миллисекунд страница успеет загрузится. Есть ли какое-нибудь более приемлемый метод определить, что DOM в документе в iFrame загружен?


Ответ №1

Вы можете воспользоваться следующим кодом (замените jQuery на знак доллара, если хотите). Функция callIframe принимает 2 параметра: адрес страницы подгружаемого iFrame, а также функцию обратного вызова (callback), которая будет вызвана после его загрузки.

function callIframe(url, callback) {
    jQuery('#iframediv').html('<iframe id="myid" style="width:100%;height:100%;" />');
    jQuery('iframe#myid').attr('src', url);
    jQuery('iframe#myid').load(function()
    {
        callback(this);
    });
}
// Пример использования:
jQuery('#thebutton').click(function(){
    callIframe('/', function(){
        alert('Ваш iFrame загружен!');
    });

});

Пример

1 комментарий

Добавить комментарий


(обязательно)