Redimensionnement automatique d'une iframe

par Korben -

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.

Le code JavaScript

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

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;
}

Implémentation HTML

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

<iframe 
width="700" 
id="the_iframe" 
onload="calcHeight();" 
src="testing_page.shtml" 
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 !

Notes importantes

  1. Assurez-vous que le contenu de l’iframe provient du même domaine que la page parente, afin d’éviter des erreurs CORS.
  2. 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
  • La présence d’autres scripts qui interfèrent avec cette fonction