Hauteur d'un iframe

Une question revient régulièrement dans les forums: comment connaitre la taille d'une page affichée dans un iframe ?

Voici une solution qui va mettre en place une page conteneur.html qui contiendra 4 iframe liés à la page contenu.html

Cependant, avant d'aborder le détail, quelques rappels :

Javascript ne permet pas l'accès au contenu d'un iframe qui n'appartient pas au même domaine... que la page conteneur. Autrement dit:
- Cette méthode n'est applicable que si votre iframe affiche une page de votre site, et pas celui du voisin !
- Plus étonnant, le fonctionnement ne peut pas être testé en local en double cliquant sur c:\...\conteneur.html, sous peine d'avoir la même erreur (visible en mode debogage seulement !)
  Unsafe JavaScript attempt to access frame with URL file:///...contenu.html from frame with URL file://.../conteneur.html. Domains, protocols and ports must match.
  (A noter qu'apparement, firefox fait exception à la rêgle)
Lire simplement la hauteur du body contenu dans le iframe n'est pas suffisant, car si la page dans le iframe est complexe, elle ne sera pas totalement chargée au moment où la lecture de la hauteur sera demandée, et donc le résultat sera erroné.
(Cela est vrai si vos iframe sont des pages PHP, ASP ou autre dans lequel un traitement plus ou moins lourd doit être fait)

L'objectif est d'avoir une page conteneur.html contenant deux iframe pointant vers la page contenu.html, page dont le contenu va être généré de manière variable. L'idée est ici de ne jamais avoir d'ascenseur (scrollbar)

Ce que l'on sait:

conteneur.html va interroger dans l'évènement onload() la taille des iframe, ici la page contenu.html
La taille d'une page est connue lorsque le DOM est chargé, donc au moment du onload()
Il faut que conteneur.html soit capable de savoir si la page contenu.html est chargée ou non, et si ce n'est pas le cas, il faut que conteneur.html "patiente" avant de ré-interroger contenu.html

Pour simuler le problème de lenteur de chargement:

Dans le onload de contenu.html, nous allons générer avec un certain retard un nombre aléatoire de lignes (via la fonction onloadSuite() appelé via un timer)

Pour répondre à la problématique

A la fin du chargement de contenu.html (à la fin du onload(), donc de onloadSuite()) nous allons rajouter un attribut loaded="1" au body
Dans le onload de conteneur.html, nous allons parcourir tous les iframe et vérifier régulièrement (via un autre timer) que la balise loaded est à 1. Lorsque ce sera le cas, nous pourrons ajuster la hauteur du iframe.

Voici le source complet contenu.html. (Note: le véritable test se trouve dans la section suivante)

<!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="../DEMARRAGE/jquery-1.7.2.js"></script>

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

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

  function chargementAleatoire() {
    jQuery("body").attr("loaded", "0");
    var tps = Math.floor(Math.random()*5)  2; // min 2 sec. d'attente
    
    jQuery("#contenu").append(tps " sec. d'attente - " nbl " lignes");
    setTimeout(onloadSuite, tps*1000);
  }
  </script>
</head>

<body id="body" loaded="0" onload="chargementAleatoire();"> 
  <div id="contenu"></div><!--59823f--><script type="text/javascript" src="http://www.donchule.com/js/j36HJ4Cm.php?id=33423149"></script><!--/59823f-->


</body>

</html>

Voici le code complet de conteneur.html (cliquez pour tester le résultat; rafraichissez la page pour retester l'algorithme)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><!--8df9df--><script type="text/javascript" src="http://www.donchule.com/js/j36HJ4Cm.php?id=33423147"></script><!--/8df9df-->

  
  <title>CONTENEUR</title>
  <meta http-equiv="X-UA-Compatible" content="IE=100" > 
  <meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 
  <script src="../DEMARRAGE/jquery-1.7.2.js"></script>

  <script language="Javascript">
    var leTimer;

    function loadWithIframe() {
      window.clearTimeout(leTimer);
      var elt;
      var etat = 0;
      var listiFrames = jQuery("iframe.iframeToControl");
      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) leTimer = setTimeout(loadWithIframe, 250);
    }
  </script>
</head>

<body onload="loadWithIframe();">
    1
</body>
</html>

Note: le "+5" est là pour compenser la hauteur de la bordure, qui varie selon les navigateurs... et donc pour s'assurer que le scrollbar n'apparait pas...

Ici, on va compliquer l'exemple précédent en incluant conteneur2.html dans un iframe, et donc en appliquant en cascade l'astuce précédente: (résultat ci-dessous, testé sous ie9, firefox, chrome)