Table des matières
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