Как вызвать событие, когда загрузка фрейма завершена в jQuery? - PullRequest
Новая
       41

Как вызвать событие, когда загрузка фрейма завершена в jQuery?

93 голосов
/ 27 августа 2008

Мне нужно загрузить PDF на странице.

В идеале я хотел бы получить загрузочный анимированный GIF, который будет заменен после загрузки PDF.

Ответы [ 13 ]

211 голосов
/ 27 августа 2008

Вы пробовали: 

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});
35 голосов
/ 28 августа 2008

Я почти уверен, что это невозможно.

Практически все, кроме PDF, работает, даже Flash. (Проверено на Safari, Firefox 3, IE 7)

Слишком плохо.

7 голосов
/ 24 июля 2012

Я пытаюсь это и, кажется, работает на меня: http://jsfiddle.net/aamir/BXe8C/

Большой PDF-файл: http://jsfiddle.net/aamir/BXe8C/1/

7 голосов
/ 28 августа 2009

Это сделало это для меня (не в формате pdf, а в другом контенте с поддержкой onload): 

<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
    iframe = document.getElementById("frameid");

    WaitForIFrame();

    function WaitForIFrame() {
        if (iframe.readyState != "complete") {
            setTimeout("WaitForIFrame();", 200);
        } else {
            done();
        }
    }

    function done() {
        //some code after iframe has been loaded
    }
</script>

Надеюсь, это поможет.

5 голосов
/ 14 декабря 2011

Я попробовал готовый подход к этому, я не проверял это для содержимого PDF, но он работал для обычного содержимого на основе HTML, вот как:

Шаг 1 : оберните свой Iframe в оболочку div

Шаг 2 : добавление фонового изображения в упаковщик div: 

.wrapperdiv{
  background-image:url(img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center; /*Can place your loader where ever you like */
}

Шаг 3 : в теге iframe ur add ALLOWTRANSPARENCY="false"

Идея состоит в том, чтобы показать анимацию загрузки в div-оболочке, пока iframe не загрузится после того, как iframe загрузит анимацию загрузки.

Дайте ему попытку.

5 голосов
/ 01 июня 2009 
$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

Вы пробовали .ready вместо?

4 голосов
/ 26 мая 2011

При использовании jquery Load и Ready ни один из них не совпадал, когда iframe был готов к TRULY.

Я закончил тем, что делал что-то вроде 

$('#iframe').ready(function () {
    $("#loader").fadeOut(2500, function (sender) {
        $(sender).remove();
    });
});

Где #loader - это абсолютно позиционированный div поверх iframe с вращающимся GIF.

2 голосов
/ 28 августа 2008

@ Алекс, это облом. Что если в вашем iframe есть HTML-документ, похожий на: 

<html>
  <head>
    <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
  </head>
  <body>
  </body>
</html>

Определенно взломать, но это может работать для Firefox. Хотя мне интересно, будет ли событие загрузки срабатывать слишком рано в этом случае.

0 голосов
/ 22 июня 2016

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

Z-индекс iframe должен быть (z-индекс загрузки + 1) или чуть выше.

Например: 

.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }

Надеюсь, это поможет, если не было решения javaScript. Я действительно считаю, что CSS - лучшая практика для таких ситуаций.

С уважением.

0 голосов
/ 07 апреля 2016

Поскольку после загрузки pdf-файла документ iframe будет иметь новый элемент DOM <embed/>, поэтому мы можем выполнить проверку следующим образом: 

    window.onload = function () {


    //creating an iframe element
    var ifr = document.createElement('iframe');
    document.body.appendChild(ifr);

    // making the iframe fill the viewport
    ifr.width  = '100%';
    ifr.height = window.innerHeight;

    // continuously checking to see if the pdf file has been loaded
     self.interval = setInterval(function () {
        if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
            clearInterval(self.interval);

            console.log("loaded");
            //You can do print here: ifr.contentWindow.print();
        }
    }, 100); 

    ifr.src = src;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...