web-dev-qa-db-fra.com

existe-t-il un moyen de charger une iframe de manière asynchrone

j'ai une page Web avec un iframe pointant vers un autre site Web. Je ne veux pas que cela bloque le chargement du reste de la page. existe-t-il un moyen de le charger de manière asynchrone?

iframeasynchronous
40
leora

Il ne devrait pas bloquer. Si vous souhaitez que la page principale soit entièrement chargée en premier (par exemple, les images de la page principale avant le contenu de l'iframe), vous devrez utiliser un peu de javascript pour définir l'URL de l'iframe, comme <body onload="javascript:...">

12
Steve Cooper

En utilisant jQuery, cela fonctionne:

<script type="text/javascript">
  $(window).load(function() {
    var f = document.createElement('iframe');
    f.src = url; 
    f.width = 1000; 
    f.height = 500;
    $('body').append(f);
  });
</script>

où url est une URL.

9
John Pick

Je pense que @Coxy a raison de dire que l'OnLoad ne se déclenchera pas. Au moins lors de l'exécution de certains tests de performances de pages Web, il m'a semblé qu'il attendait que l'iframe considère que la page était entièrement chargée. J'utilise donc ce petit extrait jQuery pour charger l'iframe:

HTML: <iframe id="blabla"></iframe>

JS:

$(window).load(function() {
   if ($('#blabla').length <= 0) { return; }  // to avoid errors in case the element doesn't exist on the page / removed.
   $('#blabla').attr('src','//example.com/page');
});
4
gingerlime

les iframes devraient se charger de manière asynchrone sans aucun effort de votre part.

4
outis

Un problème que nous avons rencontré est que, bien que les iframes se chargent déjà de manière asynchrone, la page principale ne se déclenche pas tant que l'iframe n'a pas fini de se charger.

Nous avons contourné ce problème en "simulant" OnLoad en appelant la méthode que nous voulions dans un élément de script au bas de la page principale, même en dehors de la balise de fermeture du corps:

</body>
<script  type='text/jscript' language='javascript'>
BodyOnready();
</script>
3
Coxy

vous pouvez attendre jusqu'à ce que "onload" se soit déclenché pour définir le src de l'iframe:

<body onload="loadFrame">

alors quelque chose comme ça:

function loadFrame(){
    var myFrame = document.getElementById('myFrame');
    myFrame.src = "myURL";
};
2
Ido Ofir

Bien que je convienne que cela ne devrait pas se produire, vous pouvez attendre que votre page Web soit complètement chargée, puis charger le contenu de l'iframe. Avec jQuery, je pense que vous pouvez faire quelque chose comme ceci:

  • Supposons que votre IFRAME ressemble à: <iframe name="theOtherPage"></iframe>

$(document).ready(function(){
  (window.frames || document.frames)["theOtherPage"].window.location = "http://theotherpage.com/"; 
});
2
Joel A. Villarreal Bertoldi