Comment dois-je déclencher un événement lorsqu'un iframe a fini le chargement de jQuery?

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

  •  09-06-2019
  •  | 
  •  

Question

Je charge un fichier PDF dans une page.

Idéalement, je voudrais avoir un chargement gif animé qui est remplacé une fois le fichier PDF a chargé.

Était-ce utile?

La solution

Je suis à peu près certain qu'il ne peut pas être fait.

N'importe quoi d'autre que PDF fonctionne, même Flash.(Testé sur Safari, Firefox 3, internet explorer 7)

Trop mauvais.

Autres conseils

Avez-vous essayé:

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

Cela n'a pour moi (pas de pdf, mais un autre "onload résistant à l'" contenu): 

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

Espérons que cette aide.

Je suis en train d'essayer cela et semble fonctionner pour moi:http://jsfiddle.net/aamir/BXe8C/

Plus fichier pdf:http://jsfiddle.net/aamir/BXe8C/1/

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

avez-vous essayé .prêt à la place?

J'ai essayé un hors de la zone de formule, je n'ai pas testé cette pour PDF le contenu, mais il a fait un travail normal HTML contenu, voici comment:

Étape 1:Enveloppez votre Iframe dans un div wrapper

Étape 2:Ajouter une image de fond à votre div wrapper:

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

Étape 3:dans ur balise iframe ajouter ALLOWTRANSPARENCY="false"

L'idée est de montrer l'animation de chargement dans le conteneur div jusqu'à l'iframe charge après qu'il a chargé l'iframe couvrirait l'animation de chargement.

Lui donner un essai.

En utilisant à la fois jquery Charge et de Prêt ni semble vraiment correspondre lors de l'iframe est VRAIMENT prêt.

J'ai fini par faire quelque chose comme ceci

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

Où #loader est un positionnement absolu div dessus de l'iframe avec un spinner gif.

@Alex aw qui est une déception.Que faire si votre iframe vous aviez un document html qui ressemble à:

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

Certainement un hack, mais il pourrait travailler pour Firefox.Bien que je me demande si l'événement load aurait le feu trop vite dans ce cas.

Voici ce que je fais pour toute action, et il fonctionne dans Firefox, IE, Opera, et 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>

J'ai dû afficher un loader tout en pdf dans un iFrame est du chargement, de sorte que je viens avec:

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

Je fais preuve d'un chargeur.Une fois que je suis sûr que le client peut voir mon chargeur, je vais appeler onCompllet chargeurs méthode qui charge un iframe.Iframe a un "onLoad" de l'événement.Une fois le PDF est chargé, il déclenche onloat cas où je me cache du chargeur :)

La partie importante:

iFrame a "onLoad" de l'événement où vous pouvez faire ce que vous avez besoin (masquer les chargeurs etc.)

Si vous pouvez vous attendre le navigateur pour ouvrir/enregistrer interface de pop-up pour l'utilisateur une fois que le téléchargement est terminé, vous pouvez exécuter lorsque vous démarrez le téléchargement:

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

Si la boîte de dialogue pop-up en haut de la page, le flou de l'événement de déclenchement.

Car une fois le fichier pdf est chargé, l'iframe document aura un nouvel élément du DOM <embed/>, nous pouvons donc faire de la case comme ceci:

    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 solution que j'ai appliqué à cette situation est de placer simplement un absolu de chargement de l'image dans les DOM, qui sera couvert par l'iframe de la couche après l'iframe est chargé.

Le z-index de l'iframe doit être (chargement du z-index + 1), ou tout simplement plus.

Par exemple:

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

Espérons que cela aide si aucune solution d'activer javaScript n'.Je pense que le CSS est la meilleure pratique pour ces situations.

En ce qui concerne meilleur.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top