Calcul de la hauteur d'un iframe

0/5 (2 avis)

Snippet vu 5 712 fois - Téléchargée 18 fois

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

Ajouter un commentaire Commentaires
Urbanspirit Messages postés 93 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 6 septembre 2013
25 sept. 2012 à 09:00
Depuis un moment je cherchais à faire de même :)

merci bcp je test sa dans la semaine :)
mango26 Messages postés 4 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 24 septembre 2012
24 sept. 2012 à 12:42
très bon script !
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)