Adapter hauteur de iframe à son contenu

Adapter hauteur de iframe à son contenu - HTML/CSS - Programmation

Marsh Posté le 02-01-2007 à 18:48:31    

Bonjour et meilleurs voeux pour cette nouvelle année! :)
 
je pensais que ça ne me poserait pas de souci, mais je n'y arrive pas, voici ma question :
 
Comment adapter la hauteur d'une iframe à son contenu?
Cette iframe doit contenir des questionnaires plus ou moins longs selon les liens.
Telle qu'elle est aujourd'hui, la page contient deux scrollbar (une pour l'iframe et l'autre pour la page) ce qui complique la vie de bien de personnes dont moi ;)
je voudrais que :
- SEULE l'IFRAME ait cette scrollbar et que la hauteur de la page soit fixe
- OU que SEULE la PAGE ait cette scrollbar et qu'elle prenne la hauteur du questionnaire dans l'iframe
 
j'ai vu quelques scripts par-ci par là (JS) mais qui ne me permettent pas d'aller au bout de l'iframe........enfin.......ça marche pas quoi!
voici le code de l'iframe

Code :
  1. <iframe
  2.  onload="iFrameHeight()"
  3.  id="blockrandom"
  4.  name="iframe"
  5.  src="< ?php echo $row->url; ?>"
  6.  width="< ?php echo $params->get( 'width' ); ?>"
  7.  height="< ?php echo $params->get( 'height' ); ?>"
  8.  scrolling="< ?php echo $params->get( 'scrolling' ); ?>"
  9.  align="top"
  10.  frameborder="0"></iframe>


et le JS qui était déjà en place

Code :
  1. <script language="javascript" type="text/javascript">
  2.  function iFrameHeight() {
  3.   var h = 0;
  5.   if ( !document.all ) {
  6. //alert('ttt');  
  7.    h = document.getElementById('blockrandom').contentDocument.height;
  8.    document.getElementById('blockrandom').style.height = h + 60 + 'px';
  9.   } else if( document.all ) {
  10. alert('yyy');
  11.    h = document.frames('blockrandom').document.body.scrollHeight;
  12.    document.all.blockrandom.style.height = h + 20 + 'px';
  13.   }
  14.  }
  15.  </script>


 
 
je continue à chercher mais si qqn peut me faire gagner du temps (car c'ets un site en ligne), ce serait génial
merci par avance
Cévi


Message édité par miltonis le 03-01-2007 à 15:19:44
Reply

Marsh Posté le 02-01-2007 à 18:48:31   

Reply

Marsh Posté le 03-01-2007 à 12:56:03    

Hello!
UP!
:)

Reply

Marsh Posté le 04-01-2007 à 15:50:14    

Bonjour!
personne ne sait comment faire pour adapter la hauteur d'une iframe à son contenu????
de mon coté je n'avance pas, un coup de main serait le bienvenu
merci

Reply

Marsh Posté le 04-01-2007 à 15:55:04    

c'est super vu et revu ce genre de topic (je crois même en avoir fait un).
Donc un coup de recherche et hop!

 

tu trouveras que ça se fait assez simplement sous IE (un peu de JS quand même).

 

et tu devrais arriver à la conclusion suivante : les iFrames, ça pue.

 

de rien.

 

edit: j'en ai fait un où je posais la même question, pas un truc genre [Topic UNIK] Les trucs crades à faire en JS


Message édité par brisssou le 04-01-2007 à 15:56:00

---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 05-01-2007 à 12:51:15    

Salut!
 
merci pour les infos :)
je viens d'adapter ce que dit ce topic :http://forum.hardware.fr/hfr/Progr [...] 7425_1.htm (13e message), mais sans résultat satisfaisant.
Voici ce que ça donne : http://chorreradelindio.chez-alice.fr/tofs/001.jpg
 
je ne comprends pas, j'essye plusierus méthodes sans succès. je dois mal m'y prendre....
un pti coup de main svp?

Reply

Marsh Posté le 05-01-2007 à 13:37:36    

Pourquoi vouloir utiliser un iframe ? On est en 2007 là :/

Reply

Marsh Posté le 05-01-2007 à 15:17:26    

:) Je sais, totalement d'accord avec vous. Je vous explique :
C'est un site créé avec Joomla (j'suis pas fan mais la personne qui était à ce poste avant ne savait pas vraiment créer des sites), le fait est que j'ai repris le bébé et qu'il faut que je fasse avec. Je ne vais pas révolutionner tout un site (qui est assez énorme) juste pour afficher 4 pages...
 
C'est peut etre pour ça que le script JS ne fonctionne pas vraiment sur ce site.....mais je ne crois pas, il y a utre chose
le JS

Code :
  1. <script>
  2.  function actu_iframe(){
  3.      if(navigator.appName=="Microsoft Internet Explorer" ){
  4.          if(document.all) document.all.id_iframe.style.height = document.frames("id_iframe" ).document.body.scrollHeight;
  5.          else document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.scrollHeight;
  6.          }
  7.      else{
  8.          document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.offsetHeight+"px";
  9.          }
  10.      }
  11.  </script>


et l'iframe appelant le JS

Code :
  1. <iframe onLoad="actu_iframe();" src="<?php echo $row->url; ?>" name="name_iframe" id="id_iframe" width="<?php echo $params->get( 'width' ); ?>" frameborder="yes" SCROLLING="auto"><?php echo _CMN_IFRAMES; ?></iframe>


 
Ce qu'il manque c'est juste comment déterminer la hauteur de l'iframe selon son contenu, sachant que les liens de la page sommaire dans l'iframe laissent place à d'autres pages dans cette meme iframe.
Merci

Reply

Marsh Posté le 09-01-2007 à 16:39:06    

Bonjour,
personne n'est pro du Javascript? :(
moi je bloque toujours et ne sais plus quoi faire....
HELP please!

Reply

Marsh Posté le 09-01-2007 à 16:42:52    

C'est pas qu'on est pas pro, c'est que la solution n'est pas très bien choisie.
 
Les iframes posent exactement le même problème que les frames : usabilité, référencement, etc. Et en plus s'ils doivent avoir la même taille que le contenu... Genre faut attendre que tout le contenu soit chargé avant de pouvoir définir la taille, sinon bonjours les sauts :( Suffit qu'une image ne se charge pas, ou mette du temps, et *boom*

Reply

Marsh Posté le 09-01-2007 à 17:02:07    

function setHeight()
  {
    var hauteur;  
    var iframe = document.getElementById( "mainframe" );  
    if( document.all )
      hauteur = iframe.contentWindow.document.body.scrollHeight + 20;  
    else
      hauteur = iframe.contentWindow.document.body.offsetHeight + 20;
    iframe.setAttribute( "height", hauteur );  
  }
 
 <iframe style="width:100%;border:0px;" src="test.html" id=mainframe onload="setHeight();"></iframe>

Reply

Marsh Posté le 09-01-2007 à 17:02:07   

Reply

Marsh Posté le 09-01-2007 à 18:06:10    

merci de vos réponses.
Nonau,
je viens d'appliquer le code que tu viens de m'envoyer mais malheureusement ça ne fonctionne pas.
C'est très énervant! |:(
Je me demande si ce n'est pas le code environnant qui empeche le focntionnement des scripts envoyés...
 
je comprends votre réticence à travailler sur des iframes, voici toutefois le code de la page en question....si coup d'oeiul est jeté, ravi je serai :)

Code :
  1. <?php
  2. class HTML_wrapper {
  4. function displayWrap( &$row, &$params, &$menu ) {
  5.  ?>
  7.  <script>
  8.  function setHeight()
  9.   {
  10.     var hauteur; 
  11.     var iframe = document.getElementById( "mainframe" ); 
  12. alert('ttt');
  13.     if( document.all ) {
  14.       hauteur = iframe.contentWindow.document.body.scrollHeight + 20; 
  15.     } else {
  16. alert(222);
  17.       hauteur = iframe.contentWindow.document.body.offsetHeight + 20;
  18. alert(hauteur);
  19.     iframe.setAttribute( "height", hauteur );  }
  20.   }
  21.  </script>
  23.  <div class="contentpane<?php echo $params->get( 'pageclass_sfx' ); ?>">
  25.  <?php
  26.  if ( $params->get( 'page_title' ) ) {
  27.   ?>
  28.   <div class="componentheading<?php echo $params->get( 'pageclass_sfx' ); ?>">
  29.   <?php echo $params->get( 'header' ); ?>
  30.   </div>
  31.   <?php
  32.  }
  33.   ?>
  35.  <iframe style="width:100%; border:0px;" src="<?php echo $row->url; ?>" id="mainframe" onload="setHeight()"></iframe>
  37.  </div>
  38.  <?php
  39.  // displays back button
  40.  mosHTML::BackButton ( $params );
  41. }
  42. }
  43. ?>


merci encore...


Message édité par miltonis le 09-01-2007 à 18:06:49
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed