J'étais moi-même à la recherche d'une solution simple pour modifier la hauteur d'un iframe avec le contenu qu'il contient.
Il semble que les règles stipulent que vous ne pouvez pas obtenir la hauteur de l'iframe à partir de la page qui la contient. C'est apparemment pour des raisons de sécurité. Comment peut-on faire cela ?
Dans l'iframe : Cela signifie donc que vous devez ajouter du code dans la page iframe. Ajoutez simplement ce script à votre code DANS L'IFRAME :
<body onload="parent.alertsize(document.body.scrollHeight);">Dans la page d'attente : Dans la page contenant l'iframe (dans mon cas avec ID="myiframe") ajoutez un petit javascript :
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>Ce qui se passe maintenant, c'est que lorsque l'iframe est chargé, il déclenche un javascript dans la fenêtre parent, qui dans ce cas est la page contenant l'iframe.
À cette fonction JavaScript, il envoie le nombre de pixels de la hauteur de son (iframe).
La fenêtre parent prend le nombre, lui ajoute 32 pour éviter les barres de défilement, et définit la hauteur de l'iframe sur le nouveau nombre.
C'est tout, rien d'autre n'est nécessaire.
Mais si vous voulez connaître d'autres petits trucs, continuez à lire...
HAUTEUR DYNAMIQUE DANS L'IFRAME ? Si, comme moi, vous aimez changer de contenu, la hauteur de l'iframe changera (sans que la page ne se recharge et ne déclenche le onload). J'ajoute généralement un toggle script très simple que j'ai trouvé en ligne :
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
}
</script>à ce script il suffit d'ajouter :
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>La façon d'utiliser le script ci-dessus est simple :
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>Pour ceux qui aiment couper, coller et partir de là, voici les deux pages. Dans mon cas, elles se trouvaient dans le même dossier, mais cela devrait aussi fonctionner avec d'autres domaines (je pense...).
Code de la page d'attente complète :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>
<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>Code iframe complet : (cette iframe nommée "theiframe.htm")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight);
}
</script>
</head>
<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
</body>
</html>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
