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

Question

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

У меня есть 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 загружается дважды (предупреждение также отображается дважды).

Answer 1

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

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

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

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

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

Answer 2

использование событие загрузки iframe

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

Answer 3

В соответствии с ответом Тима Дауна , но используя jQuery (упомянутое ОП) и свободно связывая содержащую страницу и фрейм, вы можете сделать следующее:

В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() { ... });

Answer 4

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

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

Answer 5

Без кода в 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)" >

Answer 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);

Answer 7

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