Come posso attivare un evento quando un iframe ha terminato il caricamento in jQuery?

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

  •  09-06-2019
  •  | 
  •  

Domanda

Devo caricare un PDF all'interno di una pagina.

Idealmente mi piacerebbe avere una gif animata in caricamento che venga sostituita una volta caricato il PDF.

È stato utile?

Soluzione

Sono abbastanza certo che non si possa fare.

Praticamente qualsiasi cosa oltre al PDF funziona, anche Flash.(Testato su Safari, Firefox 3, IE 7)

Peccato.

Altri suggerimenti

Hai provato:

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

Questo lo ha fatto per me (non pdf, ma un altro "onload contenuto resistente"): 

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

Spero che questo ti aiuti.

Sto provando questo e sembra che funzioni per me:http://jsfiddle.net/aamir/BXe8C/

File pdf più grande:http://jsfiddle.net/aamir/BXe8C/1/

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

hai provato invece .ready?

Ho provato un approccio immediato a questo, non l'ho testato per il contenuto PDF ma ha funzionato per il normale contenuto basato su HTML, ecco come:

Passo 1:Avvolgi il tuo Iframe in un wrapper div

Passo 2:Aggiungi un'immagine di sfondo al wrapper div:

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

Passaggio 3:nel tuo tag iframe aggiungi ALLOWTRANSPARENCY="false"

L'idea è di mostrare l'animazione di caricamento nel div wrapper fino al caricamento dell'iframe, dopo averlo caricato l'iframe coprirebbe l'animazione di caricamento.

Provaci.

L'utilizzo sia di jquery Load che di Ready non sembrava corrispondere realmente quando l'iframe era VERAMENTE pronto.

Alla fine ho fatto qualcosa del genere

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

Dove #loader è un div assolutamente posizionato sopra l'iframe con una gif che ruota.

@Alex aw che peccato.E se nel tuo iframe avevi un documento html che assomigliava a:

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

Sicuramente un hack, ma potrebbe funzionare per Firefox.Anche se mi chiedo se in quel caso l'evento di caricamento si attiverebbe troppo presto.

Ecco cosa faccio per qualsiasi azione e funziona in Firefox, IE, Opera e 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>

Ho dovuto mostrare un caricatore mentre il pdf in iFrame veniva caricato, quindi cosa mi viene in mente:

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

Sto mostrando un caricatore.Una volta che sono sicuro che il cliente possa vedere il mio caricatore, chiamo il metodo dei caricatori onCompllet che carica un iframe.Iframe ha un evento "onLoad".Una volta caricato il PDF, si attiva l'evento onloat in cui nascondo il caricatore :)

La parte importante:

iFrame ha un evento "onLoad" in cui puoi fare ciò di cui hai bisogno (nascondere caricatori ecc.)

Se puoi aspettarti che l'interfaccia di apertura/salvataggio del browser venga visualizzata all'utente una volta completato il download, puoi eseguirlo quando avvii il download:

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

Quando viene visualizzata la finestra di dialogo nella parte superiore della pagina, si attiverà l'evento di sfocatura.

Poiché dopo il caricamento del file pdf, il documento iframe avrà un nuovo elemento DOM <embed/>, quindi possiamo eseguire il controllo in questo modo:

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

La soluzione che ho applicato a questa situazione è semplicemente posizionare un'immagine di caricamento assoluta nel DOM, che sarà coperta dal livello iframe dopo il caricamento dell'iframe.

Lo z-index dell'iframe dovrebbe essere (z-index del caricamento + 1) o appena superiore.

Per esempio:

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

Spero che questo sia d'aiuto se nessuna soluzione JavaScript lo ha fatto.Penso che i CSS siano la migliore pratica per queste situazioni.

Distinti saluti.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top