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

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

  •  09-06-2019
  •  | 
  •  

Frage

Ich muss ein PDF innerhalb einer Seite laden.

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

War es hilfreich?

Lösung

Ich bin mir ziemlich sicher, dass das nicht möglich ist.

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

Schade.

Andere Tipps

Hast du es versucht:

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

Das hat es für mich getan (kein PDF, sondern ein anderes "onload beständiger" 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.

Ich versuche Folgendes und scheint bei mir zu funktionieren:http://jsfiddle.net/aamir/BXe8C/

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

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

Haben Sie stattdessen .ready ausprobiert?

Ich habe hierfür einen sofort einsatzbereiten Ansatz ausprobiert. Ich habe dies nicht für PDF-Inhalte getestet, aber es hat für normale HTML-basierte Inhalte funktioniert. So geht's:

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 besteht darin, die Ladeanimation im Wrapper-Div anzuzeigen, bis der Iframe geladen wird, nachdem er geladen wurde, würde der Iframe die Ladeanimation abdecken.

Versuche es.

Die Verwendung von jquery Load und Ready schien nicht wirklich zusammenzupassen, als 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 positioniertes Div über dem Iframe mit einem Spinner-GIF ist.

@Alex aw, das ist ein Mist.Was wäre, wenn in Ihrem iframe Sie hatten ein HTML-Dokument, das so aussah:

<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.Allerdings frage ich mich, ob das Ladeereignis in diesem Fall zu früh ausgelöst würde.

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>

Ich musste einen Loader anzeigen, während PDF in iFrame geladen wird, also kam ich auf Folgendes:

    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 onCompllet-Loader-Methode auf, die einen Iframe lädt.Iframe hat ein „onLoad“-Ereignis.Sobald das PDF geladen ist, wird ein Onloat-Ereignis ausgelöst, bei dem ich den Loader verstecke :)

Der wichtige Teil:

iFrame verfügt über ein „onLoad“-Ereignis, mit dem Sie tun können, was Sie brauchen (Loader ausblenden usw.).

Wenn Sie damit rechnen können, dass dem Benutzer nach Abschluss des Downloads die Schnittstelle zum Öffnen/Speichern des Browsers angezeigt wird, können Sie Folgendes 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.

Denn nach dem Laden der PDF-Datei verfügt das Iframe-Dokument über ein neues DOM-Element <embed/>, also können wir die Prüfung wie folgt 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;
}

Die Lösung, die ich in dieser 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 (Z-Index des Ladens + 1) oder etwas höher sein.

Zum Beispiel:

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

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

Beste grüße.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top