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.
