Событие jQuery iframe load()?

Кто-нибудь знает, есть ли такая вещь?

У меня есть iframe, который вставлен с $.ajax(), и я хочу сделать некоторые вещи после того, как содержимое из iframe будет полностью загружено:

....
 success: function(html){  // <-- html is the IFRAME (#theiframe)
          $(this).html(html);   // $(this) is the container element
          $(this).show();
          $('#theiframe').load(function(){
             alert('loaded!');
          } 
....

он работает, но я вижу, что IFRAME загружается дважды (предупреждение также отображается дважды).

Ответ 1

Если возможно, вам лучше обработать событие load в документе iframe и вызвать функцию в содержащем документе. Это имеет то преимущество, что работает во всех браузерах и работает только один раз.

В основном документе:

function iframeLoaded() {
    alert("Iframe loaded!");
}

В документе iframe:

window.onload = function() {
    parent.iframeLoaded();
}

Ответ 2

использовать событие iframe onload

$('#theiframe').on("load", function() {
    alert(1);
});

Ответ 3

В строках Tim Down answer, но используя jQuery (упомянутый OP) и слабо связав содержащую страницу и iframe, вы можете сделать следующее

В iframe:

<script>
    $(function() {
        var w = window;
        if (w.frameElement != null
                && w.frameElement.nodeName === "IFRAME"
                && w.parent.jQuery) {
            w.parent.jQuery(w.parent.document).trigger('iframeready');
        }
    });
</script>

На странице с содержанием:

<script>
    function myHandler() {
        alert('iframe (almost) loaded');
    }
    $(document).on('iframeready', myHandler);
</script>

iframe запускает событие в (потенциально существующем) родительском окне документа - будьте осторожны, чтобы родительский документ нуждался в экземпляре jQuery, чтобы это работало. Затем в родительском окне вы прикрепляете обработчик для реагирования на это событие.

Это решение имеет то преимущество, что не разбивается, когда содержащая страница не содержит ожидаемого обработчика нагрузки. В более общем плане, это не должно быть проблемой iframe, чтобы знать окружающую среду.

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

$(window).on('load', function() { ... });

Ответ 4

То же поведение, которое я видел: iframe load() будет запускаться сначала на пустой iframe, затем второй раз, когда загружается ваша страница.

Редактировать: Хм, интересно. Вы можете увеличить счетчик в обработчике событий и a) проигнорировать первое событие load или b) игнорировать любое дублирующее событие load.

Ответ 5

Вы можете использовать метод jquery Contents, чтобы получить содержимое iframe.

Ответ 6

Если вы хотите, чтобы он был более общим и независимым, вы можете использовать cookie. Содержимое iframe может устанавливать cookie. С jquery.cookie и таймером (или в этом случае таймер javascript) вы можете проверить, установлен ли cookie каждую секунду или около того.

//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
        cookieValue = $.cookie('iframeToken');  
        if (cookieValue == token)
        {
            window.clearInterval(iframeLoadCheckTimer );
            $.cookie('iframeToken', null, {
                expires: 1, 
                path: '/'
         });
        }
 }, 1000);

Ответ 7

Без кода в iframe + animate:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

function resizeIframe(obj) {

    jQuery(document).ready(function($) {

        $(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500)

    });

}    
</script>
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >