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

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

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

ОТВЕТЫ

Ответ 1

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

Довольно многое другое, кроме PDF, даже Flash. (Проверено на Safari, Firefox 3, IE 7)

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

Ответ 2

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

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});

Ответ 3

Это сделало это для меня (не 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

$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

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

Ответ 6

Я пробовал использовать этот подход, я не тестировал его для содержимого 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: в теге ur iframe добавьте ALLOWTRANSPARENCY="false"

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

Попробуйте.

Ответ 7

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

В итоге я сделал что-то вроде этого

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

Где #loader - абсолютно позиционированный div поверх вершины iframe с spinner gif.

Ответ 8

@Alex aw, что облом. Что делать, если в вашем iframe у вас был html-документ, похожий на:

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

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

Ответ 9

Вот что я делаю для любого действия, и оно работает в Firefox, IE, Opera и Safari.

<script type="text/javascript">
  $(document).ready(function(){
    doMethod();
  });
  function actionIframe(iframe)
  {
    ... do what ever ...
  }
  function doMethod()
  {   
    var iFrames = document.getElementsByTagName('iframe');

    // what ever action you want.
    function iAction()
    {
      // Iterate through all iframes in the page.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
        actionIframe(iFrames[i]);
      }
    }

    // Check if browser is Safari or Opera.
    if ($.browser.safari || $.browser.opera)
    {
      // Start timer when loaded.
      $('iframe').load(function()
      {
        setTimeout(iAction, 0);
      }
      );

      // Safari and Opera need something to force a load.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
         var iSource = iFrames[i].src;
         iFrames[i].src = '';
         iFrames[i].src = iSource;
      }
    }
    else
    {
      // For other good browsers.
      $('iframe').load(function()
      {
        actionIframe(this);
      }
      );
    }
  }
</script>

Ответ 10

Мне нужно было показать загрузчик, в то время как PDF в iFrame загружается, так что я придумал:

    loader({href:'loader.gif', onComplete: function(){
            $('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
    }
    });

Я показываю загрузчика. Как только я уверен, что клиент может увидеть мой загрузчик, я вызываю метод loadComComlet, который загружает iframe. Iframe имеет событие onLoad. После загрузки PDF он запускает событие onloat, где я скрываю загрузчик:)

Важная часть:

В iFrame есть событие onLoad, где вы можете делать то, что вам нужно (скрыть загрузчики и т.д.).

Ответ 11

Если вы можете ожидать, что интерфейс открытия/сохранения браузера появится для пользователя после завершения загрузки, вы можете запустить его при запуске загрузки:

$( document ).blur( function () {
    // Your code here...
});

Когда диалог появится вверху страницы, произойдет размытие события.

Ответ 12

Поскольку после загрузки файла 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;
}

Ответ 13

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

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

Например:

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

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

С уважением.