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

StackOverflow https://stackoverflow.com/questions/30005

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

Я почти уверен, что этого сделать невозможно.

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

Очень жаль.

Другие советы

Попытался ли ты:

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

Это помогло мне (не 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>

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

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

Увеличенный PDF-файл:http://jsfiddle.net/aamir/BXe8C/1/

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

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

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

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

Попробуйте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

С наилучшими пожеланиями.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top