Calcul de la hauteur d'un iframe

Commenter

Contenu du snippet

La solution pour calculer la hauteur d'un iframe est disponible sur beaucoup de forums ou blogs. Elle consiste à lire dans le onload de la fenêtre principale la hauteur de la page contenu dans le iframe. Cependant, la page en question peut ne pas être totalement créée à ce moment. En effet, la page contenu dans le iframe peut être issue d'une page aspx / php ... complexe demandant un certain temps d'exécution.
Ayant été confronté à ce problème, je vous propose ici la solution que j'ai mis en place

Sur mon exemple, il y a 2 fichiers: conteneur.html, et contenu.html qui va être ouvert 2 fois dans 2 iframe de la page conteneur.html
- contenu.html simule un chargement long en utilisant un timer
- conteneur.html attend que chaque iframe soit chargé pour redimensionner ceux-ci

PS: la bibliothèque jQuery est utilisé ici pour plus de facilité (à vous de la télécharger)

Source / Exemple : 





contenu.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>CONTENU</title>
  <meta http-equiv="X-UA-Compatible" content="IE=100" > 
  <meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 
  <style type="text/css">
    #contenu { background-color:yellow; } 
  </style>
  
  <script src="jquery-1.7.2.js"></script>

  <script language="Javascript">
  var nbline = Math.floor(Math.random()*10)+5; // minimum 5 lignes
  
  function onloadSuite() {
    for (var i = 1; i < nbline; i++) { jQuery("#contenu").append("<br/>" +i); }

    jQuery("body").attr("loaded", "1");
  }

  function chargementAleatoire() {
    jQuery("body").attr("loaded", "0");
    var temps=Math.floor(Math.random()*5) +2; // minimum 2 secondes d'attentes
    
    jQuery("#contenu").append(temps + " secondes d'attente - " + nbline + " lignes");
    setTimeout(onloadSuite, temps*1000);
  }
  </script>
</head>

<body id="body" loaded="0" onload="chargementAleatoire();"> 
  <div id="contenu"></div>
</body>

</html>



conteneur.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>  
  <title>CONTENEUR</title>
  <meta http-equiv="X-UA-Compatible" content="IE=100" > 
  <meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 
  <script src="jquery-1.7.2.js"></script>

  <script language="Javascript">
    var leTimerResizeX;
    var first=true;

    function loadWithIframe() {
      window.clearTimeout(leTimerResizeX);
      var elt;
      var etat = 0;
      var listiFrames = jQuery("iframe.iFcontrol");
      var pasFini = false;

      for (var i = 0; i < listiFrames.length; i++) {
        elt = jQuery(listiFrames[i]);

        if (elt.length > 0) {
          etat = jQuery(elt.contents()).find("body").attr("loaded");
          etat = etat == undefined ? 0 : etat;
          
          if (etat<1) {
            pasFini = true;
          }
          else {
            if (etat==1) {
              jQuery(elt.contents()).find("body").attr("loaded", "2");
              elt.height(elt.contents().height() +5);
            }
          }
        }
      }
      
      if (pasFini) leTimerResizeX = setTimeout(loadWithIframe, 250);
    }
  </script>
</head>

<body onload="loadWithIframe();">
    A
    <iframe class="iFcontrol" src="./contenu.html"></iframe>
    B
    <iframe class="iFcontrol" src="./contenu.html"></iframe>
</body>
</html>

Conclusion :


Si nécessaire, vous trouverez plus d'explications ici: http://mywebdev.free.fr/JQUERY/iframeheight.php
Le code peut être testé à cette même adresse (lien vers conteneur.html)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (originalcompo)