Par exemple :
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
Je veux qu'il puisse ajuster sa hauteur en fonction du contenu qu'il contient, sans utiliser le scroll.
Ajoutez ceci à votre section <head>
:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Et changez votre iframe en ceci :
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Tel que trouvé sur [sitepoint discussion][1].
[1] : https://www.sitepoint.com/community/t/auto-height-iframe-content-script/67843
La suggestion de hjpotter92 ne fonctionne pas dans Safari ! J'ai apporté une petite modification au script afin qu'il fonctionne également dans Safari.
Le seul changement apporté est la réinitialisation de la hauteur à 0 à chaque chargement afin de permettre à certains navigateurs de diminuer la hauteur.
Ajoutez ceci à la balise <head>
:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Et ajoutez l'attribut onload
suivant à votre iframe, comme ceci
<iframe onload='resizeIframe(this)'></iframe>
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height=(newheight) + "px";
document.getElementById(id).width=(newwidth) + "px";
}
ajoutez ceci à votre iframe : onload="autoResize('youriframeid' ;)" ;