Forum : Iframe et hauteur automatique

Bonjour à tous,

je dois créer une système de discussion ressemblant à discus. En gros, on intégre sur une page un script javascript qui va créer une iframe dans lequel se trouvera la discussion.

Jusque à la pas de problème. Le soucis se trouve au niveau de la hauteur de l'iframe. Sauf erreur, la page embarquée dans l'iframe et la page parent ne peuvent pas communiquer entre elles car dans notre cas, il s'agit de cross domaine (Si la page embarquée dans l'iframe peut communiquer avec la page parent pouvez vous me le dire car ça résoudrait mon problème lol).

Du coup mon iframe a toujours la même hauteur. Comment faire en javascript pour que la hauteur de l'iframe soit égale à celle de la page embarquée ?

Un exemple :

Sur ce site http://blog.bouygues-uk.com/2014/09/02/an-opportunity-to-shape-a-better-life/ au niveau de la div#disqus_thread il y a un script qui crée une iframe. La hauteur de cette iframe est toujours egale à celle du contenu à l'intérieur de l'iframe.

J'ai cherché mais je ne sais pas comment ils font ça. Pouvez vous me donner la technique ?

Grafikart

Réponse acceptée

L'iframe peut communiquer avec le parent avec un parent.document du coup il te suffit après tu peux redimensionner l'iframe. Idéalement tu lui donnera un ID parent.document.getElementById('disqus_like');

JapanFigs

Auteur

Si l'iframe peut communiquer avec le parent et lui dire quelle est la hauteur c'est super ^^
Grand merci (PS j'adore tes tutos)

JapanFigs

Auteur

Ca ne fonctionne pas ... es tu sur de toi ?

Grafikart

window.parent.document te donne bien le document parent ?
Pour calculer la hauteur de l'iframe faut le faire depuis l'iframe par contre car le parent n'a pas accès aux enfants

JapanFigs

Auteur

En fait ca fonctionne seulement si la page parent.html et iframe.html se trouvent sur le même domaine.
Voici mon code source de la page parent.html :

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <iframe id="toto" src="iframe.html"></iframe>
</body>
</html>

Voici le code source de la page iframe.html:

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        Hello Grafikart
    </div>
     <script type="text/javascript">
        window.parent.document.getElementById('toto').setAttribute("height", "400px!important");
     </script>
</body>
</html>

Le soucis est que iframe.html (ca peut être un fichier php si necessaire) doit se trouver sur un autre serveur.
Tout comme l'exemple http://blog.bouygues-uk.com/2014/09/02/an-opportunity-to-shape-a-better-life/ qui intégre l'iframe se trouvant sur disqus.com

J'étais persuadé que ce n'était pas possible à cause du cross domaine jusque ce que je tombe sur cette page: http://blog.bouygues-uk.com/2014/09/02/an-opportunity-to-shape-a-better-life/

Comment font ils ?

Iframe et hauteur automatique

5 réponses