web-dev-qa-db-fra.com

Définir la hauteur du contenu iframe pour un redimensionnement automatique dynamique

J'étais moi-même à la recherche d'une solution simple pour changer 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 le contient. Ceci est apparemment dû à la sécurité. Comment peut-on le faire?

iframeresizeheight
58
Paul

Dans l'iframe: Cela signifie donc que vous devez ajouter du code dans la page d'iframe. Ajoutez simplement ce script à votre code IN THE IFRAME:

<body onload="parent.alertsize(document.body.scrollHeight);">

Dans la page de conservation: 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 parente, qui est dans ce cas la page contenant l'iframe.

À cette fonction JavaScript, il envoie le nombre de pixels de sa hauteur (iframe).

La fenêtre parente prend le nombre, y ajoute 32 pour éviter les barres de défilement et définit la hauteur de l'iframe sur le nouveau nombre.

C'est ça, rien d'autre n'est nécessaire.

Mais si vous aimez connaître quelques petites astuces, continuez à lire ...

HAUTEUR DYNAMIQUE DANS L'IFRAME? Si vous aimez changer de contenu, la hauteur de l'iframe changera (sans le rechargement de la page et le déclenchement du chargement). J'ajoute généralement un script de basculement 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, ajoutez simplement:

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

Comment 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 juste couper et coller et partir de là, voici les deux pages. Dans mon cas, je les avais dans le même dossier, mais cela devrait fonctionner aussi entre domaines (je pense ...)

Code de maintien complet: 

<!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 est 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>

démo

12
Paul

Solution simple:

<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>

Cela fonctionne lorsque l’iframe et la fenêtre parente se trouvent dans le même domaine. Cela ne fonctionne pas lorsque les deux sont dans des domaines différents.

1
M Fishbein