Chez Papinou  -  Skins GuppY

Accueil  Blog  Nouvelles  Télécharger  Liens  Livre d'or  Forum
Forum - Sujet n°1896

Sujet n°1896 Hauteur de l'iframe
    - par Gerard le 17/02/2026 @ 12:59

Bonjour Papinou,

Ton astuce pour l'iframe fonctionne très bien. Là un mots-croisés https://www.chimpanzedupresent.fr/articles.php?lng=fr&pg=504  

J'aurais voulu permettre l'affichage intégral du contenu de l'iframe. Mais il y a une mystérieuse limite de hauteur.

Donc, pour le mot-croisés, comme pour le pdf de Santiano que tu mets en exemple, j'ai cherché une solution pour faire disparaître les ascenseurs en rendant la hauteur responsive. Je n'ai pas trouvé de solution simple. 

Quand on a quelque chose à dire, il faut oser ouvrir sa gueule.


Rectifié par Gerard le 18/02/2026 @ 08:56

Réponse n° 1
    - par Papinou le 22/02/2026 @ 09:46

Bonjour,

A la différence d'un fichier pdf, dans ton fichier htm, il y a une gestion de la hauteur de la page.

Tu regardes à partir de la ligne 737 "PAGE DIMENSION FUNCTIONS", j'ai modifié les lignes 740 et 741 pour les adapter au contenu.

De toute façon 600 et 400 ne correspondent en rien au contenu à afficher.

Parfois le fichier s'affiche complètement sans ascenseur, mais au premier rafraichissement de page l'ascenseur  revient.

J'ai mis en commentaires toute la partie de la gestion des dimensions, cela ne change rien.

  

Cordialement, Papinou



Réponse n° 2
    - par Gerard le 22/02/2026 @ 15:22

Bonjour Papinou,

Merci beaucoup.

En effet ça ne marche pas. Je t'ai mis en copie sur gmail dans la demande d'aide que je fais aux codeurs de Hot Potatoes. On va peut-être avoir la solution.

Sinon, en attendant, j'ai trouvé ça :

https://hotline.asdrad.com/ajuster_la_hauteur_des_iframe

jquery-iframe-auto-height
S'appuyant sur la bibliothèque jQuery, jquery-iframe-auto-height propose une solution simple à mettre en œuvre. Dans l'exemple suivant, on se contente d'ajouter un code JavaScript à la suite de l'élément iframe que l'on veut redimensionner :

<iframe src="../mon_iframe.html" class="hauteur-auto" scrolling="no" frameborder="0"></iframe>
<script>
  $('iframe.hauteur-auto').iframeAutoHeight({minHeight: 400});
</script>
Dans cet exemple, le redimensionnement est limité aux iframes de la classe “hauteur-auto” et l'on impose une hauteur minimale, dans l'éventualité où la hauteur nécessaire au contenu de l'iframe serait inférieure à cette valeur.

Après s'être assuré que la bibliothèque jQuery et le plugin jquery-iframe-auto-height sont effectivement chargés par la page, on n'oubliera pas d'insérer un déclencheur de redimentionnement, dans la page-hôtesse, de préférence dans le head :

<script>
  $(document).ready(function () {
    $('iframe').iframeAutoHeight({debug: true});
  });
</script>
Pour une description complète des options, paramètres et fonctionnalités, se reporter à la documentation de jquery-iframe-auto-height.

-------
-------

jQuery Auto Iframe Height
Source : tutoriel (blog - en).

Auto Iframe Height est un plugin jQuery plus rustique que le précédent mais plus simple à mettre en œuvre. Il suffit de charger jQuery et jquery.autoheight (dans le head) :

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../jquery.autoheight.js"></script>
On déclare ses iframes comme d'habitude. On n'a plus qu'à les rattacher à la classe autoHeight (mot réservé du plugin) :

<iframe id="mon_iframe" name="mon_titre" class="autoHeight" scrolling="auto" frameborder="0" src="http://mon.domaine.tld/iframe.php"></iframe>

Quand on a quelque chose à dire, il faut oser ouvrir sa gueule.


Rectifié par Gerard le 22/02/2026 @ 15:33

Retour à la liste des sujets
Haut
© 2005-2026
Skins Papinou GuppY 6    Licence Libre CeCILL