iframe dimension

Sujet résolu

25 juillet 2016 à 11:58:08

Je souhaiterais qu'un iframe prennent comme dimension celle de son contenue et cela de façon dynamique. J'ai beaucoup chercher sur internet et je n'ai rien trouvé de très concluant même si de nombreux topiques sur le sujet existent déjà. En réalité, si, j'ai trouvé une fonction qui marche presque parfaitement :

<script>
function IframeStruct(iframeid) {
if (!window.parent) return;
var myiframe = window.parent.document.getElementById(iframeid);
if(!myiframe) return;
myiframe.style.height = document.body.scrollHeight+"px";
}
</script>

Cette fonction je la place dans le head de la page chargée par l'iframe et je l'appelle au chargement de la page. Je l'appelle aussi lorsque je fait apparaître des div qui sont cacher au chargement (en diplay: none). Jusque là tout va bien, l'iframe ajuste sa taille correctement. Le problème c'est qu'ensuite quand je fait disparaître certaines div (display: none) et que la taille diminue donc, l'iframe reste à la même dimension. Ce que j'en conclu c'est que ma fonction permet uniquement de faire grandir l'iframe mais ne peut pas le réduire ensuite (même pour retrouvé sa taille initiale).

J'avoue que je ne comprend pas très bien cette fonction et je ne sais pas vraiment comment l'améliorer...

Deejayfool

25 juillet 2016 à 12:17:21

Salut,

Une petite astuce pas très propre mais qui fait son boulot est de réduire la taille de ton iframe à 0px avant de lui donner sa taille définitive.

Tu as tout à fait raison dans le sens où réduire l'iFrame ne fonctionne pas mais l'agrandir oui.

Voici la solution qui devrait résoudre ton problème :

<script>
function IframeStruct(iframeid) {
if (!window.parent) return;
var myiframe = window.parent.document.getElementById(iframeid);
if(!myiframe) return;
myiframe.style.height = "0px";
myiframe.style.height = document.body.scrollHeight+"px";
}
</script>

-
Edité par Deejayfool 25 juillet 2016 à 13:37:55

bryan33000

25 juillet 2016 à 12:17:56

Salut,

En fait là tu as une fonction qui redimensionne ton iframe au chargement de ta page. Il faut que tu lui appliques la fonction au window.resize aussi. Ensuite, les divs cachées dont tu parles, c'est des divs dans la fenêtre parente ou dans l'iframe?

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)

azzeryx

25 juillet 2016 à 13:19:00

Deejayfool ta technique marche très bien, mais il se produit un effet indésirable : l'iframe prenant comme taille 0 (alors qu'il est en bas de page), lorsque l'on modifie sa taille on se retrouve décaler par rapport à lui et c'est assez gênant.

bryan33000 pourquoi pas utiliser window.resize mais pour le moment j'utilise juste un onclick placer dans mes div. Les div dont je parle sont situés dans l'iframe.

Deejayfool

25 juillet 2016 à 13:37:34

Je n'ai pas très bien compris le problème :/ . Est-ce qu'il y a un moyen d'accéder à ta page pour voir quel est ce problème ?

azzeryx

25 juillet 2016 à 14:14:08

Non malheureusement je travail en local. Si tu veux c'est un peut comme si il y avait un lien vers une ancre plus haut sur la page. J'ai mis des Screenshots ci-dessous : on voit que quand on clique sur la partie entouré en rouge pour faire apparaître un textarea dans une div en Display: none (image 2), ta méthode me propulse plus haut sur la page internet (image 1).

Deejayfool

25 juillet 2016 à 14:25:02

Effectivement c'est normal :/ .

J'ai une solution secondaire dans ce cas qui devrait fonctionner.

Il faut que tu prennes non pas le body, mais une div qui englobe le contenu de ta page. L'idéal serait une div juste en dessous du body.

Par exemple, si tu as :

<html>
  <head>
  </head>
  <body>
    <div id="toto">
      <!-- Ici se trouve tout ton contenu -->
    </div>
  </body>
</html>

Alors tu peux adapter ton code comme ceci :

<script>
function IframeStruct(iframeid) {
if (!window.parent) return;
var myiframe = window.parent.document.getElementById(iframeid);
if(!myiframe) return;
myiframe.style.height = document.getElementById('toto').offsetHeight+"px";
}
</script>

azzeryx

25 juillet 2016 à 16:25:23

Avec ce code on se rapproche du bute mais il y a un nouveau problème: l'iframe est toujours légèrement trop petit (taille insuffisante d'environ 50px qui ne varie pas).

Deejayfool

25 juillet 2016 à 16:29:05

C'est malheureusement ce que je craignais...

Tu peux donc appliquer cette solution là, et cette fois-ci on devrait arriver à bon port .

<script>
var delta = 50;

function IframeStruct(iframeid) {
if (!window.parent) return;
var myiframe = window.parent.document.getElementById(iframeid);
if(!myiframe) return;
myiframe.style.height = (document.getElementById('toto').offsetHeight + delta) +"px";
}
</script>

Après il va falloir un peu jouer avec la valeur de delta en l'augmentant jusqu'à ce que tu n'ai plus de scrollbar.

azzeryx

25 juillet 2016 à 16:58:49

Avec delta=65 ça marche parfaitement; merci !