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.

Chargement en cours...

Opportunité JOB :

Quoi

Principe

Code

Source

Discussion