Iframe à la taille de son contenu

Par Korben | Nb visites : 750

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

<script language="JavaScript">
<!--
function calcHeight()
{
  //récupère la hauteur de la page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;</p>
<p>  //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:

<iframe width="700" id="the_iframe"<br />
	onLoad="calcHeight();"<br />
	src="testing_page.shtml"<br />
	scrolling="NO"<br />
	frameborder="1"<br />
	height="1"><br />
ici un petit texte visible uniquement<br />
des navigateurs qui ne supportent pas<br />
les iframes<br />
</iframe>

Et voilà ! Ca peut dépanner !

Je vous recommande aussi la lecture des sujets suivants

Faites un lien vers cette news sur votre site

15 commentaires

Neiyo

Bonjour,

Serait il possible d’adapter ce script pour pouvoir appliquer un redimensionnement à l’iframe sans modifier le contenu de l’iframe ?

Je m’explique.

J’aimerais intégrer proprement une page externe sur mon site.

Le problème est que je n’ai aucun accès au code de cette page et je ne peux donc pas le modifier.

Mon souhait est de pouvoir faire en sorte que l’iframe soit à la taille de son contenu pour que mon site ne soit pas déformé.

Si vous avez une solution.

Merci

Posté le 21 novembre 2007 à 12:48:05

chewie

merci chef
2 jours que je suis là dessus :p

Posté le 25 février 2008 à 14:18:45

Abbes

ben merci!
ça marche très bien!!!!!!

Posté le 10 mars 2008 à 16:02:08

Stof

AH ca c cool ca marche impécable: thanks man j’ai cherché un moment

Posté le 10 mars 2008 à 16:47:58

WaNTeD

Super ! Enfin un script de redimentionnement d’height qui fonctionne !!!

Je vais le modifier par rapport à mes besoins

Cool, continue comme cela !

Posté le 30 mars 2008 à 11:45:25

Diti

Les caylemal, caymieux !

Posté le 30 mars 2008 à 12:35:51

Diti

alert(« Korbeninou, mes balises HTML ont été interprétées, c’est grave ? »);

Posté le 30 mars 2008 à 13:51:23

admin

Quelles balises ?

Posté le 30 mars 2008 à 14:37:27

Diti

Je voulais dire « BALISE OUVRANTE iframe BALISE FERMANTE caylemal, BALISE OUVRANTE object BALISE FERMANTE caymieux », mais les deux balises ont été interprétées.

Posté le 30 mars 2008 à 14:55:10

seebz

Salut Korben,
juste pour dire que le code javascript n’est pas visible (faut lire la source pour le voir), ce serait bien que tu édite pour les autres