Niveau

En rapport...

Quoi

Il est possible d'ajuster automatiquement la taille d'une iframe a celle de son contenu. (c'est d'ailleur valable pour ( FIXME presque ?) tous les éléments).

Principe

L'evenement onload de la balise BODY du document que contient l'iframe doit apeller une fonction de la fenêtre parent. C'est cette fonction qui ajustera la taille.

Code

Voici le source de la page qui va contenir l'iframe :

javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
adjusting iframe size
</title>
<script type="text/javascript">
function adjustIFrameSize (iframeWindow) {
  if (iframeWindow.document.height) {
    var iframeElement = document.getElementById
(iframeWindow.name);
    iframeElement.style.height = iframeWindow.document.height + 'px';
    iframeElement.style.width = iframeWindow.document.width + 'px';
  }
  else if (document.all) {
    var iframeElement = document.all[iframeWindow.name];
    if (iframeWindow.document.compatMode &&
        iframeWindow.document.compatMode != 'BackCompat') 
    {
      iframeElement.style.height = 
iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
      iframeElement.style.width = 
iframeWindow.document.documentElement.scrollWidth + 5 + 'px';
    }
    else {
      iframeElement.style.height = 
iframeWindow.document.body.scrollHeight + 5 + 'px';
      iframeElement.style.width = 
iframeWindow.document.body.scrollWidth + 5 + 'px';
    }
  }
}
</script>
</head>
<body>
<h2>Auto ajustement d'un iframe</h2>
<hr>
<iframe name="iframeName" id="iframeName"
        marginwidth="0" marginheight="0"
        src="mapage.htm"><a 
href="mapage.html">page</a></iframe>
<hr>
</body>
</html>

L'attribut NAME et l'attribut ID de l'iframe on la même valeur.
Ceci est etentiel pour permetre à l'iframe de trouver le bon objet a modifier.

Ci-dessous le code de la page qui est chargé par l'iframe (ici :mapage.htm).
Pour l'utiliser dans votre page, vous aurez juste a copier l'evenement onload.

javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
test document which has random length
</title>
</head>
<body onload="if (parent.adjustIFrameSize)
                parent.adjustIFrameSize(window);"
>
<script type="text/javascript">
var lines = Math.floor(Math.random() * 100) + 25;
for (var i = 0; i < lines; i++)
  document.write(i + ' Kibology<br \/>');
</script>
</body>
</html>

Source

Traduit de : http://www.faqts.com/knowledge_base/view.phtml/aid/1076/fid/127

— iDo 15/12/2005 15:57

Discussion

athesia, 18/05/2007 22:59:

c’est exactement ce que je cherchais! ce script est fantastique :)

merci

Julien, 27/08/2007 10:15:

Ce script est génial merci… Simplement, j'aimerais garder du script uniquement l'ajustement en hauteur afin de pouvoir attribuer la valeur width=“100%” pour que la frame prenne 100% de l'espace en largeur dans le <div> Quelqu'un peut il m'aider please ?

iDo, 27/08/2007 10:20:

salut ! tu n'a qu'a mettre en commentaire les ligne suivante :

javascript

iframeElement.style.width = iframeWindow.document.width + 'px';

javascript

iframeElement.style.width = iframeWindow.document.documentElement.scrollWidth + 5 + 'px';

et

javascript

iframeElement.style.width = iframeWindow.document.body.scrollWidth + 5 + 'px';

et ça devrais le faire

Julien, 27/08/2007 10:39:

Merci de ta réponse rapide… Cependant je n'ai aucune connaissance en Javascript. Qu'appelles tu mettre en commentaire ? est-ce mettre // ?

Merci d'avance

Julien, 27/08/2007 10:47:

En gros pour te faire part de mon pb… Voici le lien du site que je développe http://www.dynamhit.org/site2/index4.html

Au centre une frame (celle ou est inscrit Bonjour a tous), qui doit s'ajuster en hauteur ( fonction formidablement remplie par le script ^^ ) J'aimerai que la frame prenne 100% de la largeur. J'ai développé cette page en '%' et non en pixel. la frame est insérée dans une balise <div> régie par un style CSS.

Le code semble bloqué la frame à environ 200px en largeur…

Je m'excuse pour les explication peu claires, mais je ne suis qu'un débutant… si qqn m'a compris ^^

iDo, 27/08/2007 16:34:

re salut. Oui par mettre en commentaire j'entends mettre des // devants. Tu peu aussi tous simplement les supprimer.

Julien, 28/08/2007 08:21:

Problème résolu, merci iDo

Julien, 04/09/2007 12:05:

Re : Je viens de m'appercevoir que le code ne fonctionne pas dans la version 6 d'Internet Explorer… quelqu'un aurait-il un correctif ou une explication à me fournir à ce sujet. Merci d'avance !!

iDo, 05/09/2007 08:54:

salut,
tu obtiens une erreur ou rien ne se passe ?

khalid bichri, 21/03/2008 19:28:

salut, merci pour tous mes amis j'ai une question est qu'il y a une possibilité de afficher seulement une partie d'une page dans le IFRAME. par exemple une partie au centre.

hicham elarif, 23/04/2008 23:36:

salut

lion, 23/04/2008 23:39:

merci pour le javascript il marche bien mais juste avec le fichier interne, alors que pour les page externe (http://www.) il ne marche pas.

svp s'il vous avez une solution a mon probléme

iDo, 24/04/2008 09:09:

Il s'agit d'une restriction de sécurité. C'est incontournable… Le seul moyen est de “récupérer” les page distante avec CURL (php) ou de mettre en place un reverseProxy (Module Apache). Mais aucune de ces deux solution n'est triviale a mettre en place.

MatLethal, 28/08/2008 11:47:

salut,

j'essayé ton script. il est génial !

j'ai juste un soucis avec Firefox (3.0, j'avoue que j'ai pas essayé sous la version 2)… ma page à affichée dans l'iframe peut être tres grande en hauteur (genre un tableau de 1000 lignes générées par requete sql par exemple). dans ce cas-ci, une scroll-bar apparait sur la droite de l'iframe et elle ne se redimentionne pas jusqu'au bout… Du coup on est obligé d'utiliser la scroll-bar pour voir la suite de la page “contenu”. la page “conteneur” prend apparemment la hauteur qu'elle devrait avoir en affichant l'iframe en entiere. Il a du blanc apres l'iframe.

j'ai l'impression que comme la requete de la page “contenu” est assez longue a afficher, au bout d'un moment, ton script prend le pas et affiche quand meme l'iframe alors que sa hauteur n'est pas encore définie… je ne sais pas si je me suis bien fait comprendre mais bon… une idée ?

Epox, 17/12/2008 10:13:

Vraiment ce que je cherchais pour insèrer un forum dans mon site.

Merci beaucoup

didier, 28/02/2009 13:21:

Merci pour ce script que j'utilise maintenant sur http://10moi.fr/annuaire/index.htm Par contre j'ai été obligé de supprimer la ligne document.write(i + ' Kibology<br \/>'); car j'obtenais + de 100 lignes de ce style : Kibology 1 Kibology 2 Kibology 3 … Cela semble bien fonctionner maintenant mais je suis intrigué 1) par ces lignes que j'obtenais 2)que cela fonctionne sans cette ligne Kiboligy ! Si je pouvais avoir un éclaircissement ? Ceci dit je n'avais même pas idée que l'on pouvait redimensionner un iframe de cette façon !!! Bravo !!!

johnathan, 11/09/2009 15:45:

Bonjour Merci pour ce script il ma beaucoup aidé ! MERCI MERCI MERCI j'espere avoir une réponse malgré la date de poste de ce message

je me demande si il est possible de modifier le onload de la page cliente et de tous avoir dans la page parent.

Sans cela je suis bloque, j'aimerais affiche une page du site d'un amis mais a chaques fois il est obligé de mètre le onload dans ces page pour récupéré la taille de celle-ci.

comment faire ? merci par avance pour votre réponse.

STEPHANE, 03/12/2009 19:20:

voila j'ai un tableau en 3 parties. les parties du haut et du bas sont fixes. La partie centrale est une iframe. J'ai des liens dans ma partie haute qui, une fois cliqués, changent le contenu de mon iframe par d'autres pages. Ca fonctionne bien. Mon objectif: ne jamais recharger ma page principale lorsque je clique sur mes liens, mais simplement changer le contenu de mon iframe (jusque là, ca fonctionne) et ajuster la taille de celle-ci en fonction de la taille des pages de destination (c'est la que j'ai un pbl) J'ai mis en place un script de redimensionnement automatique qui fonctionne très bien en réduction/agrandissement sous la condition que la page soit refresh. Dans mon cas, vu que je ne souhaite pas de refresh de ma page principale, le redimensionnement s'effectue toujours vers une hauteur de frame plus longue, mais jamais vers une hauteur de frame plus courte . Si je m'explique mal, voici en exemple mes essais : la “page.htm” est ma page principale que je ne souhaite pas recharger dans celle-ci, il y a donc mon tableau avec les 2 parties fixes (haut et bas) et mon iframe centrale. Explication du pbl: ⇒ http://bit.ly/4ZDFZG Lorsque je clique sur “lien1”, mon iframe s'agrandit avec ma page de destination.(dans la page principale et sans refresh) par contre, après, si je clique sur “lien2”, mais mon iframe ne se réduit pas à la taille de ma page de destination qui est plus courte. voilà le pbl ! maintenant si vous faites refresh de la page et que vous cliquez sur “lien3”, puis “lien2”, et “lien1” on voit bien qu'elle s'agrandie au fur et a mesure suivant la taille des pages de destination. Savez vous comment faire pour réduire la taille de mon iframe automatiquement ?

Catherine, 06/12/2009 22:06:

Bonsoir Stephanie. j'ai exactement la même problématique que toi , bon sauf que la partie centrale est occupée par iframe à gauche et une mini colonne à gauche. et je suis bigrement interessée par ton script. alor sis tu acceptes de me l'envoyer ça serait génial.