Wie löse ich ein Ereignis aus, wenn ein Iframe in jQuery vollständig geladen wurde?

95

Ich muss ein PDF innerhalb einer Seite laden.

Idealerweise hätte ich gerne ein animiertes GIF zum Laden, das ersetzt wird, sobald das PDF geladen wurde.

javascript jquery Alex Andronov
quelle

Antworten:

38

Ich bin mir ziemlich sicher, dass das nicht geht.

So ziemlich alles andere als PDF funktioniert, sogar Flash. (Getestet auf Safari, Firefox 3, IE 7)

Schade.

Antti Kissaniemi
quelle
FWIW, alle (sogar PDF) arbeiteten für mich mit Chrome unter OS X.
pkaeding
Ja, es funktioniert in Chrome, aber nicht im IE. Wenn sich die Anwendung im Web befindet, muss sie auch im IE funktionieren.
Robert Smith
214

Hast du es versucht:

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});
Travis
quelle
19
+1, da dies beim Laden von PDFs in den Iframe zwar nicht funktioniert, für andere Inhaltstypen jedoch nützlich ist.
Cory House
3
+1 Nicht genau das, was der ursprüngliche Fragesteller wissen wollte (in Bezug auf PDF), aber diese Antwort entspricht der Frage "Wie kann ich ein Ereignis auslösen, wenn ein Iframe in jQuery geladen wurde?" . Vielen Dank
Harvey Darvey
Ich habe dies noch nicht mit PDFs versucht, aber es läuft perfekt für normale URLs.
Bob-ob
Ich benutze dies innen, $(function({})damit der Rahmen zuerst geladen wird. Aber ich bekomme nicht das erhoffte Ergebnis. Chrome 25 Mac
William Entriken
Dies funktioniert nicht zum Laden von PDF in den Iframe. Getestet in IE 11.
Robert Smith
7

Dies hat es für mich getan (kein PDF, sondern ein anderer " onloadresistenter" Inhalt):

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

Hoffe das hilft.

Yi Jiang
quelle
7
setTimeout () String Argument sollte vermieden werden:setTimeout(WaitForIFrame, 200);
Stefan Majewsky
7

Ich versuche dies und scheint für mich zu arbeiten: http://jsfiddle.net/aamir/BXe8C/

Größere PDF-Datei: http://jsfiddle.net/aamir/BXe8C/1/

Aamir Afridi
quelle
1
Nicht sehr verschieden von der Antwort von @travis, aber ich werde +1 wegen der eleganten Verwendung von attr src change und css. Ich kann jemanden sehen, der zumindest einen netten Lader vortäuscht, der das so macht.
Anthony Hatzopoulos
Das Ladeereignis wurde ausgelöst, bevor das PDF vollständig geladen wurde.
etlds
Versuchte Ihre Links unter OSX mit dem neuesten Chrome und beim Laden der ersten Seite, es hat nicht funktioniert, beibehalten, Loading PDF...aber als ich die Seite aktualisiert habe, sagte PDF Loaded!. Aber das scheint mit URLs zu funktionieren :) also ist es sehr nützlich für mich. Vielen Dank!
GabLeRoux
Dies funktioniert nicht, wenn die Datei zum Herunterladen eingestellt ist, anstatt im Iframe gerendert zu werden.
Ring
Dies funktioniert in IE 11 nicht. Behält "Laden von PDF ..." bei. Ich suche nach einer Lösung, die auch in IE 11 funktioniert.
Marc
6 
$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

hast du es stattdessen schon versucht?

Keithics
quelle
Diese Methode funktioniert nicht wie erwartet. Aus den JQuery-Dokumenten: "Die .ready () -Methode kann nur für ein jQuery-Objekt aufgerufen werden, das mit dem aktuellen Dokument übereinstimmt, sodass der Selektor weggelassen werden kann." Klingt so, als würde es nach $ (Dokument) ausgelöst, unabhängig von der verwendeten Auswahl.
Cazuma Nii Cavalcanti
Ich bin mir ziemlich sicher, dass dies eine müßige Theorie ist.
Barney
Wiederholung der früheren Antwort!
SyntaxRules
Wie andere sagten, habe ich dies getestet und es hat nicht funktioniert. Das Ready wurde bei Dokument bereit aufgerufen, nicht der Iframe ... Verwenden Sie die Option On Load.
Greg
5

Ich habe einen Out-of-the-Box-Ansatz versucht. Ich habe dies nicht für PDF-Inhalte getestet, aber es hat für normale HTML-basierte Inhalte funktioniert.

Schritt 1 : Wickeln Sie Ihren Iframe in einen Div-Wrapper

Schritt 2 : Fügen Sie Ihrem Div-Wrapper ein Hintergrundbild hinzu:

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

Schritt 3 : Fügen Sie in Ihrem Iframe-Tag hinzu ALLOWTRANSPARENCY="false"

Die Idee ist, die Ladeanimation im Wrapper-Div anzuzeigen, bis der Iframe geladen wird, nachdem er geladen wurde. Der Iframe würde die Ladeanimation abdecken.

Versuche es.

Michael Lu
quelle
4

Die Verwendung von jquery Load und Ready schien nicht wirklich zu passen, wenn der Iframe WIRKLICH bereit war.

Am Ende habe ich so etwas gemacht

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

Wobei #loader ein absolut positionierter Div über dem Iframe mit einem Spinner-GIF ist.

Chris Marisic
quelle
2

@ Alex aw das ist ein Mist. Was wäre, wenn iframeSie ein HTML-Dokument hätten, das so aussieht:

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

Auf jeden Fall ein Hack, aber es könnte für Firefox funktionieren. Obwohl ich mich frage, ob das Ladeereignis in diesem Fall zu früh ausgelöst würde.

Travis
quelle
das ist was ich suche :(
Aamir Afridi
1

Ich musste einen Loader zeigen, während das PDF in iFrame geladen wird. Also, was ich mir ausgedacht habe:

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

Ich zeige einen Lader. Sobald ich sicher bin, dass der Kunde meinen Loader sehen kann, rufe ich die Methode onCompllet Loader auf, die einen Iframe lädt. Iframe hat ein "onLoad" -Ereignis. Sobald PDF geladen ist, löst es ein Onloat-Ereignis aus, bei dem ich den Loader verstecke :)

Der wichtige Teil:

iFrame verfügt über das Ereignis "onLoad", bei dem Sie das tun können, was Sie benötigen (Lader ausblenden usw.).

Rinchik
quelle
0

Hier ist, was ich für jede Aktion mache und es funktioniert in Firefox, IE, Opera und 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
quelle
0

Wenn Sie erwarten können, dass die Öffnungs- / Speicheroberfläche des Browsers nach Abschluss des Downloads für den Benutzer angezeigt wird, können Sie dies ausführen, wenn Sie den Download starten:

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

Wenn der Dialog oben auf der Seite angezeigt wird, wird das Unschärfeereignis ausgelöst.

Ethan
quelle
0

Da das iframe-Dokument nach dem Laden der PDF-Datei ein neues DOM-Element enthält <embed/>, können wir die Prüfung folgendermaßen durchführen:

    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;
}
令狐 葱
quelle
0

Die Lösung, die ich auf diese Situation angewendet habe, besteht darin, einfach ein absolutes Ladebild im DOM zu platzieren, das nach dem Laden des Iframes von der Iframe-Ebene abgedeckt wird.

Der Z-Index des Iframes sollte (Laden des Z-Index + 1) oder nur höher sein.

Beispielsweise:

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

Hoffe das hilft wenn keine JavaScript Lösung. Ich denke, dass CSS für diese Situationen die beste Vorgehensweise ist.

Freundliche Grüße.

ElaAle
quelle