Calcul de la hauteur d'un iframe

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 518 fois - Téléchargée 16 fois

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
-
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
-
très bon script !

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.