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

95

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

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

javascript jquery Алекс андронов
источник

Ответы:

38

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

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

Жаль.

Антти Киссаниеми
источник
FWIW, все они (даже PDF) у меня работали с Chrome на OS X.
pkaeding
Да, он работает в Chrome, но не в IE. Если приложение находится в Интернете, оно также должно работать в IE.
Роберт Смит
214

Ты пробовала:

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});
Трэвис
источник
19
+1, потому что, хотя это не работает для загрузки PDF в iframe, это полезно для других типов контента.
Cory House
3
+1 Не совсем то, что хотел знать первоначальный вопрос (в отношении pdf), но этот ответ соответствует вопросу «Как запустить событие, когда iframe завершил загрузку в jQuery?» . Спасибо
Харви Дарви
Не пробовал это с PDF-файлами, но он отлично работает для обычных URL-адресов.
Bob-ob
Я использую это внутри, $(function({})чтобы рама загружалась первой. Но не получаю ожидаемого результата. Chrome 25 Mac
Уильям Энтрикен
Это не работает для загрузки PDF в iframe. Протестировано в IE 11.
Роберт Смит
7

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

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

И Цзян
источник
7
Строковый аргумент setTimeout () следует избегать:setTimeout(WaitForIFrame, 200);
Стефан Маевский,
7

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

PDF-файл большего размера: http://jsfiddle.net/aamir/BXe8C/1/

Амир Африди
источник
1
Не сильно отличается от ответа @travis, но я поставлю +1 из-за элегантного использования attr src change и css. Я вижу, как кто-то, по крайней мере, подделывает хороший загрузчик, делая это таким образом.
Энтони Хацопулос
Событие загрузки сработало до полной загрузки PDF-файла.
etlds
Пробовал ваши ссылки на OSX с последней версией Chrome и при загрузке первой страницы, это не сработало, сохранилось, Loading PDF...но когда я обновил страницу, сказал PDF Loaded!. Но, похоже, это работает с URL-адресами :) так что это очень полезно для меня. Спасибо!
GabLeRoux
Это не работает, если файл настроен на загрузку, а не на отображение в iframe.
Кольцо
Это не работает в IE 11. Сохраняется «Загрузка PDF ...». Я ищу решение, которое также работает в IE 11.
Marc
6 
$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

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

кейтика
источник
Этот метод не будет работать должным образом. Из документации JQuery: «Метод .ready () может быть вызван только для объекта jQuery, соответствующего текущему документу, поэтому селектор можно не указывать». Похоже, он будет запущен после $ (document) независимо от используемого селектора.
Cazuma Nii Cavalcanti
Я почти уверен, что это пустая теория.
Барни
Повтор предыдущего ответа!
SyntaxRules
Как утверждали другие, я тестировал это, и это не сработало. Готовность вызывалась для готового документа, а не для iframe ... Используйте параметр "При загрузке".
Грег
5

Я пробовал нестандартный подход к этому, я не тестировал это для содержимого 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, чтобы покрыть анимацию загрузки.

Попробуйте.

Майкл Лу
источник
4

Использование как jquery Load, так и Ready, похоже, не соответствовало, когда iframe был ДЕЙСТВИТЕЛЬНО готов.

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

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

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

Крис Маришич
источник
2

@Alex aw, это облом. Что, если бы у iframeвас был html-документ, который выглядел бы так:

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

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

Трэвис
источник
вот что я ищу :(
Амир Африди
1

Мне пришлось показать загрузчик, пока загружается 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>');
    }
    });

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

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

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

ринчик
источник
0

Вот что я делаю для любого действия, и это работает в 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>
user22367
источник
0

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

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

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

Итан
источник
0

Поскольку после загрузки файла 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;
}
令狐 葱
источник
0

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

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

Например:

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

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

С уважением.

ЭлаАле
источник