Aller au contenu
Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

Iframe à la taille de son contenu

J’ai eu besoin cette semaine de pouvoir redimensionner automatiquement une iframe selon la taille de son contenu…

Comment faire ? Simple… Avec un petit javascript.

Il suffit de mettre le code javascript suivant dans le head de votre page

<!-- Dans le head -->
<script language="JavaScript">
function calcHeight() {
  // Récupère la hauteur de la page
  var the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;

  // Change la hauteur de l'iframe
  document.getElementById('the_iframe').height = the_height;
}
</script>

puis de créer votre iframe dans le body de votre page comme ceci:

<!-- Dans le body -->
<iframe 
  width="700" 
  id="the_iframe"
  onLoad="calcHeight();" 
  src="testing_page.shtml" 
  scrolling="NO" 
  frameborder="1" 
  height="1">
  ici un petit texte visible uniquement des navigateurs qui ne supportent pas les iframes
</iframe>


Et voilà ! Ça peut dépanner !

Je vous conseille également de vous assurer que le contenu de l’iframe provient du même domaine que la page parente, afin d’éviter des erreurs CORS.

Si après ces correctifs, le redimensionnement de l’iframe ne fonctionne toujours pas, cela pourrait être dû à d’autres facteurs, comme des styles CSS qui empêchent le redimensionnement, ou la présence d’autres scripts qui interfèrent avec cette fonction.


Les articles du moment