Redimensionner une iframe à la hauteur de son contenu

**Seb33300** · 07/06/2009, 16h50

Bonjour,

Je cherche un moyen de redimensionner la hauteur d'une iframe à celle de son contenu.

Le javascript doit être placé sur la page parente (celle qui contient l'iframe) et les domaines entre la page parente et fille sont différent.

Existe t il un moyen de faire cela ?

Mes recherches m'ont mené vers ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<iframe src="url" onload="this.height = frmHeight(this)+'px';"></iframe>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function frmHeight(f){
   myf = f.contentWindow.document || f.contentDocument;
   return myf.height || myf.body.offsetHeight;
}

Mais quoi que je fasse j'ai toujours l'erreur suivante (à cause des domaines différent ?) :

Permission refusée d'obtenir la propriété Window.document

Existe il un moyen de contourner le problème ?

**Pikrass** · 07/06/2009, 18h41

Ce code marche chez moi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
    <head>
        <title>Test</title>
 
        <script type="application/javascript" />
            function resizeFrame(fra) {
                fra.style.height =  fra.contentDocument.body.offsetHeight + "px";
            }
        </script>
    </head>
 
    <body>
        <iframe src="dev.htm" onload="resizeFrame(this);" />
    </body>
</html>

La frame augmente bien quand la page incluse augmente mais elle est toujours très légèrement trop petite. Donc on peut modifier la fonction resizeFrame comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function resizeFrame(fra) {
    var hauteur = fra.contentDocument.body.offsetHeight + 20;
    fra.style.height = hauteur + "px";
}

En modifiant si besoin le 20.

Edit : maintenant que j'y pense, IE ne connait sans doute pas contentDocument (d'où les || dans ta fonction). Et là je m'y connais moins (je ne peux pas tester, je n'ai pas IE).

**Seb33300** · 07/06/2009, 21h26

ça fonctionne aussi quand tu met par exemple http://www.google.fr/ dans le src de l'iframe ?

parce que chez moi non

**nod__** · 07/06/2009, 21h39

Envoyé par Seb33300

Mais quoi que je fasse j'ai toujours l'erreur suivante (à cause des domaines différent ?) :

Existe il un moyen de contourner le problème ?

Tout est dit

C'est une limitation de sécurité de tous les navigateurs (un peu la même raison pour laquelle tu ne peux pas faire de requetes AJAX distantes). C'est pas pour rien que les publicitaires incluent tous leurs pubs à partir d'une iframe

Enfin bref, a moins d'avoir un reverse proxy ou de récupérer ta page à partir d'un script sur ton serveur… il ne te reste que tes yeux pour pleurer