Comment puis-je ajouter un indicateur de chargement de ma page alors que mon iframe charges?

Je suis en train de créer une page en cliquant sur un lien d'une iframe est inséré dans un div et c'est le contenu chargé. Je ne ce à l'aide de la suite de jQuery appel:

$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');

Parfois le contenu de la source charges très lentement et, par conséquent, il semble que rien ne se passe. Je voudrais avoir une simple animation de chargement pendant le chargement du contenu, tandis que le contenu de l'iframe charges. Lorsque l'iframe ait fini de charger son contenu devrait pop et l'animation de chargement devraient disparaître.

J'ai envisagé un couple de façons que je pouvais le faire (par exemple, ayant un chargeur div simplement permuter les deux dans et hors) mais je ne suis pas sûr de ce que la meilleure approche pour résoudre ce problème. Peut-être que je ne devrais pas l'utiliser .html()? Je suis ouvert à la suggestion, si il n'y a plus de bonne solution.

  • qu'est-ce que dans "sourcelink.html"? Est-ce une pleine page HTML? Je me demandais simplement si il a besoin d'être dans une iframe à tous
InformationsquelleAutor keybored | 2011-01-03
  1. 7

    Est-il une raison vous ne pouvez pas écouter la onload cas de l'iframe lui-même? Il doit se déclencher après l'enfant de contenu chargé.

    Quelque chose comme ceci:

    showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }
    • Hey merci! C'est finalement l'approche que j'ai eu avec une légère modification. $('#mydiv').html('<iframe src="sourcelink.html" onLoad="hideLoader()" frameborder="0" width="760" height="2400" scrolling="no"></iframe>'); Est-il plus ou moins correcte d'aborder le problème de cette façon?
    InformationsquelleAutor Jess
  2. 0

    Vous avez besoin de définir une méthode qui permet à votre iframe pour mettre en évidence qu'il a fini de charger, par exemple:

    Page principale:

    var ChildFrameComplete = function()
{
    $("#progress").hide();
};

var LoadChildFrame = function()
{
  $("#progress").show();
  $("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};

    sourcelink.html:

    $(function()
{
  parent.ChildFrameComplete();
});

    Si l'iframe est obtenue à partir du même domaine que la page parent de domaine, il peut faire appel à des méthodes définies dans la page parent par le biais de la window.parent propriété.

    • J'avais pensé à ajouter ce point, mais je vois maintenant que je l'ai raté. Le contenu de remplissage de l'iframe n'est pas le contenu, j'ai tout contrôle ou à l'accès à l' (autres que pour l'afficher). Il s'agit d'un autre domaine.
    InformationsquelleAutor Matthew Abbott
  3. 0

    Simplement donner de l'élément conteneur (ce cas #myDiv) un arrière-plan d'une throbber et le contenu de l'iframe se chevauchent cette quand c'est fait, le chargement.

    C'est le plus simple.

    InformationsquelleAutor M.W. Felker
  4. 0

    Donc Dans mon cas de faire ce qui suit n'a pour moi..

    Le code HTML

    <iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>

    et j'ai été chargement de l'iFrame sur le bouton du clic, voici donc le JS

     $(document).ready(function () {

  $('body').on('click','#btnLoadiFrame',function () {

  ShowLoader();

  $('#ifrmReportViewer').attr('src', url);

  $('#ifrmReportViewer').load(function () {

    HideLoader(); 

  });
  });
 });
    InformationsquelleAutor Hamza Khanzada