Jak uruchomić zdarzenie po zakończeniu ładowania elementu iframe w jQuery?

Question 1

Muszę załadować plik PDF na stronie.

Idealnie chciałbym mieć ładowany animowany gif, który jest zastępowany po załadowaniu pliku PDF.

Question 2

Jestem prawie pewien, że nie da się tego zrobić.

Działa praktycznie wszystko inne niż PDF, nawet Flash. (Testowane w Safari, Firefox 3, IE 7)

Szkoda.

Question 3

Czy próbowałeś:

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

Question 4

Zrobiło to dla mnie (nie pdf, ale inna „ onloadodporna” zawartość):

<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>

Mam nadzieję że to pomoże.

Question 5

Próbuję tego i wydaje się, że działa dla mnie: http://jsfiddle.net/aamir/BXe8C/

Większy plik pdf: http://jsfiddle.net/aamir/BXe8C/1/

Question 6

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

czy próbowałeś już zamiast tego?

Question 7

Wypróbowałem niestandardowe podejście do tego, nie testowałem tego pod kątem zawartości PDF, ale zadziałało to w przypadku normalnej zawartości HTML, oto jak:

Krok 1 : Umieść element iframe w opakowaniu div

Krok 2 : Dodaj obraz tła do opakowania div:

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

Krok 3 : dodaj tag iframe ur ALLOWTRANSPARENCY="false"

Chodzi o to, aby pokazać animację ładowania w opakowującym elemencie DIV, dopóki element iframe nie zostanie załadowany po załadowaniu, a element iframe zakryje animację ładowania.

Spróbuj.

Question 8

Używanie obu jquery Load i Ready nie wydawało się tak naprawdę pasować, gdy iframe był NAPRAWDĘ gotowy.

W końcu zrobiłem coś takiego

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

Gdzie #loader to absolutnie umieszczony element div nad elementem iframe z gifem typu spinner.

Question 9

@Alex aw to bummer. A co iframeby było, gdybyś miał w swoim dokumencie HTML, który wyglądałby tak:

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

Zdecydowanie hack, ale może działać w przeglądarce Firefox. Chociaż zastanawiam się, czy w takim przypadku zdarzenie ładowania uruchomiłoby się zbyt szybko.

Question 10

Musiałem pokazać program ładujący podczas ładowania pliku PDF w iFrame, więc to, co wymyśliłem:

    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>');
    }
    });

Pokazuję ładowarkę. Gdy upewnię się, że klient widzi mój program ładujący, wzywam metodę onCompllet, która ładuje element iframe. Element iframe zawiera zdarzenie „onLoad”. Po załadowaniu PDF wywołuje zdarzenie onloat, w którym ukrywam moduł ładujący :)

Ważna część:

iFrame ma zdarzenie „onLoad”, w którym możesz robić to, czego potrzebujesz (ukrywać programy ładujące itp.)

Question 11

Oto, co robię dla każdej akcji i działa w przeglądarkach Firefox, IE, Opera i 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>

Question 12

Jeśli możesz oczekiwać, że po zakończeniu pobierania pojawi się dla użytkownika interfejs otwierania / zapisywania przeglądarki, możesz go uruchomić po rozpoczęciu pobierania:

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

Gdy okno dialogowe pojawi się na górze strony, nastąpi rozmycie.

Question 13

Ponieważ po załadowaniu pliku pdf dokument iframe będzie miał nowy element DOM <embed/>, więc możemy sprawdzić w ten sposób:

    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;
}

Question 14

Rozwiązaniem, które zastosowałem w tej sytuacji, jest po prostu umieszczenie obrazu wczytywania absolutnego w DOM, który zostanie zakryty przez warstwę iframe po załadowaniu iframe.

Indeks z elementu iframe powinien wynosić (indeks z ładowania + 1) lub po prostu wyższy.

Na przykład:

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

Mam nadzieję, że to pomoże, jeśli żadne rozwiązanie javaScript nie zadziałało. Myślę, że CSS to najlepsza praktyka w takich sytuacjach.

Z poważaniem.

Answer 1

95

Muszę załadować plik PDF na stronie.

Idealnie chciałbym mieć ładowany animowany gif, który jest zastępowany po załadowaniu pliku PDF.

javascript jquery Alex Andronov
źródło

Answer 2

38

Jestem prawie pewien, że nie da się tego zrobić.

Działa praktycznie wszystko inne niż PDF, nawet Flash. (Testowane w Safari, Firefox 3, IE 7)

Szkoda.

Antti Kissaniemi
źródło

FWIW, wszystkie (nawet PDF) pracowały dla mnie z Chrome na OS X.

pkaeding

Tak, działa w Chrome, ale nie w IE. Jeśli aplikacja jest w sieci, to musi również działać w IE.

Robert Smith

Answer 3

FWIW, wszystkie (nawet PDF) pracowały dla mnie z Chrome na OS X.

pkaeding

Answer 4

Tak, działa w Chrome, ale nie w IE. Jeśli aplikacja jest w sieci, to musi również działać w IE.

Robert Smith

Answer 5

214

Czy próbowałeś:

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

travis
źródło

19

+1, ponieważ chociaż wygląda na to, że nie działa w przypadku ładowania plików PDF w ramce iframe, jest przydatne w przypadku innych typów treści.

Cory House

3

+1 Nie jest to dokładnie to, co pierwotny pytający chciał wiedzieć (w odniesieniu do pdf), ale ta odpowiedź pasuje do pytania „Jak uruchomić zdarzenie, gdy ramka iframe zakończyła się ładować w jQuery?” . Dzięki

Harvey Darvey,

Nie próbowałem tego z plikami PDF, ale będzie działać idealnie dla normalnych adresów URL.

Bob-ob

Używam tego wewnątrz, $(function({})aby rama ładowała się jako pierwsza. Ale nie osiągam oczekiwanego wyniku. Chrome 25 Mac

William Entriken

Nie działa to w przypadku ładowania pliku PDF w ramce iframe. Testowane w IE 11.

Robert Smith

Answer 6

19

+1, ponieważ chociaż wygląda na to, że nie działa w przypadku ładowania plików PDF w ramce iframe, jest przydatne w przypadku innych typów treści.

Cory House

Answer 7

3

+1 Nie jest to dokładnie to, co pierwotny pytający chciał wiedzieć (w odniesieniu do pdf), ale ta odpowiedź pasuje do pytania „Jak uruchomić zdarzenie, gdy ramka iframe zakończyła się ładować w jQuery?” . Dzięki

Harvey Darvey,

Answer 8

Nie próbowałem tego z plikami PDF, ale będzie działać idealnie dla normalnych adresów URL.

Bob-ob

Answer 9

Używam tego wewnątrz, $(function({})aby rama ładowała się jako pierwsza. Ale nie osiągam oczekiwanego wyniku. Chrome 25 Mac

William Entriken

Answer 10

Nie działa to w przypadku ładowania pliku PDF w ramce iframe. Testowane w IE 11.

Robert Smith

Answer 11

Zrobiło to dla mnie (nie pdf, ale inna „ onloadodporna” zawartość):

<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>

Mam nadzieję że to pomoże.

Answer 12

7

Należy unikać argumentu typu string setTimeout ():setTimeout(WaitForIFrame, 200);

Stefan Majewsky

Answer 13

7

Próbuję tego i wydaje się, że działa dla mnie: http://jsfiddle.net/aamir/BXe8C/

Większy plik pdf: http://jsfiddle.net/aamir/BXe8C/1/

Aamir Afridi
źródło

1

Niezbyt różni się od odpowiedzi @travis, ale dam +1 ze względu na eleganckie użycie zmiany attr src i css. Widzę, że ktoś przynajmniej udaje ładnego ładującego robiąc to w ten sposób.

Anthony Hatzopoulos,

Zdarzenie ładowania zostało uruchomione przed całkowitym załadowaniem pliku PDF.

etlds

Wypróbowałem linki na OSX z najnowszym Chrome i przy pierwszym załadowaniu strony, nie działało, zachowało się, Loading PDF...ale kiedy odświeżyłem stronę, powiedział PDF Loaded!. Ale to wydaje się działać z adresami URL :), więc jest to dla mnie bardzo przydatne. Dzięki!

GabLeRoux

To nie działa, jeśli plik jest ustawiony do pobierania zamiast renderowania w ramce iframe.

Pierścień

To nie działa w IE 11. Zachowuje "Ładowanie PDF ...". Szukam rozwiązania, które działa również w IE 11.

Marc

Answer 14

1

Niezbyt różni się od odpowiedzi @travis, ale dam +1 ze względu na eleganckie użycie zmiany attr src i css. Widzę, że ktoś przynajmniej udaje ładnego ładującego robiąc to w ten sposób.

Anthony Hatzopoulos,

Answer 15

Zdarzenie ładowania zostało uruchomione przed całkowitym załadowaniem pliku PDF.

etlds

Answer 16

Wypróbowałem linki na OSX z najnowszym Chrome i przy pierwszym załadowaniu strony, nie działało, zachowało się, Loading PDF...ale kiedy odświeżyłem stronę, powiedział PDF Loaded!. Ale to wydaje się działać z adresami URL :), więc jest to dla mnie bardzo przydatne. Dzięki!

GabLeRoux

Answer 17

To nie działa, jeśli plik jest ustawiony do pobierania zamiast renderowania w ramce iframe.

Pierścień

Answer 18

To nie działa w IE 11. Zachowuje "Ładowanie PDF ...". Szukam rozwiązania, które działa również w IE 11.

Marc

Answer 19

6

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

czy próbowałeś już zamiast tego?

keithics
źródło

Ta metoda nie zadziała zgodnie z oczekiwaniami. Z dokumentacji JQuery: „Metodę .ready () można wywołać tylko dla obiektu jQuery pasującego do bieżącego dokumentu, więc selektor można pominąć”. Wygląda na to, że zostanie uruchomiony po $ (dokumencie) bez względu na użyty selektor.

Cazuma Nii Cavalcanti

Jestem prawie pewien, że to jałowa teoria.

Barney

Powtórz wcześniejszą odpowiedź!

Reguły składni

Jak stwierdzili inni, przetestowałem to i nie zadziałało. Gotowy został wywołany, gdy dokument jest gotowy, a nie ramka iframe ... Użyj opcji Przy ładowaniu.

Greg,

Answer 20

Ta metoda nie zadziała zgodnie z oczekiwaniami. Z dokumentacji JQuery: „Metodę .ready () można wywołać tylko dla obiektu jQuery pasującego do bieżącego dokumentu, więc selektor można pominąć”. Wygląda na to, że zostanie uruchomiony po $ (dokumencie) bez względu na użyty selektor.

Cazuma Nii Cavalcanti

Answer 21

Jestem prawie pewien, że to jałowa teoria.

Barney

Answer 22

Powtórz wcześniejszą odpowiedź!

Reguły składni

Answer 23

Jak stwierdzili inni, przetestowałem to i nie zadziałało. Gotowy został wywołany, gdy dokument jest gotowy, a nie ramka iframe ... Użyj opcji Przy ładowaniu.

Greg,

Answer 24

Wypróbowałem niestandardowe podejście do tego, nie testowałem tego pod kątem zawartości PDF, ale zadziałało to w przypadku normalnej zawartości HTML, oto jak:

Krok 1 : Umieść element iframe w opakowaniu div

Krok 2 : Dodaj obraz tła do opakowania div:

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

Krok 3 : dodaj tag iframe ur ALLOWTRANSPARENCY="false"

Chodzi o to, aby pokazać animację ładowania w opakowującym elemencie DIV, dopóki element iframe nie zostanie załadowany po załadowaniu, a element iframe zakryje animację ładowania.

Spróbuj.

Answer 25

Używanie obu jquery Load i Ready nie wydawało się tak naprawdę pasować, gdy iframe był NAPRAWDĘ gotowy.

W końcu zrobiłem coś takiego

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

Gdzie #loader to absolutnie umieszczony element div nad elementem iframe z gifem typu spinner.

Answer 26

@Alex aw to bummer. A co iframeby było, gdybyś miał w swoim dokumencie HTML, który wyglądałby tak:

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

Zdecydowanie hack, ale może działać w przeglądarce Firefox. Chociaż zastanawiam się, czy w takim przypadku zdarzenie ładowania uruchomiłoby się zbyt szybko.

Answer 27

tego właśnie szukam :(

Aamir Afridi

Answer 28

Musiałem pokazać program ładujący podczas ładowania pliku PDF w iFrame, więc to, co wymyśliłem:

    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>');
    }
    });

Pokazuję ładowarkę. Gdy upewnię się, że klient widzi mój program ładujący, wzywam metodę onCompllet, która ładuje element iframe. Element iframe zawiera zdarzenie „onLoad”. Po załadowaniu PDF wywołuje zdarzenie onloat, w którym ukrywam moduł ładujący :)

Ważna część:

iFrame ma zdarzenie „onLoad”, w którym możesz robić to, czego potrzebujesz (ukrywać programy ładujące itp.)

Answer 29

Oto, co robię dla każdej akcji i działa w przeglądarkach Firefox, IE, Opera i 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>

Answer 30

Jeśli możesz oczekiwać, że po zakończeniu pobierania pojawi się dla użytkownika interfejs otwierania / zapisywania przeglądarki, możesz go uruchomić po rozpoczęciu pobierania:

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

Gdy okno dialogowe pojawi się na górze strony, nastąpi rozmycie.

Answer 31

Ponieważ po załadowaniu pliku pdf dokument iframe będzie miał nowy element DOM <embed/>, więc możemy sprawdzić w ten sposób:

    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;
}

Answer 32

Rozwiązaniem, które zastosowałem w tej sytuacji, jest po prostu umieszczenie obrazu wczytywania absolutnego w DOM, który zostanie zakryty przez warstwę iframe po załadowaniu iframe.

Indeks z elementu iframe powinien wynosić (indeks z ładowania + 1) lub po prostu wyższy.

Na przykład:

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

Mam nadzieję, że to pomoże, jeśli żadne rozwiązanie javaScript nie zadziałało. Myślę, że CSS to najlepsza praktyka w takich sytuacjach.

Z poważaniem.

Jak uruchomić zdarzenie po zakończeniu ładowania elementu iframe w jQuery?

Odpowiedzi: