Adapter hauteur de iframe à son contenu

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Adapter hauteur de iframe à son contenu

miltonis

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 :

<iframe
onload="iFrameHeight()"
id="blockrandom"
name="iframe"
src="< ?php echo $row->url; ?>"
width="< ?php echo $params->get( 'width' ); ?>"
height="< ?php echo $params->get( 'height' ); ?>"
scrolling="< ?php echo $params->get( 'scrolling' ); ?>"
align="top"
frameborder="0"></iframe>

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

Code :

<script language="javascript" type="text/javascript">
function iFrameHeight() {
var h = 0;
if ( !document.all ) {
//alert('ttt');
h = document.getElementById('blockrandom').contentDocument.height;
document.getElementById('blockrandom').style.height = h + 60 + 'px';
} else if( document.all ) {
alert('yyy');
h = document.frames('blockrandom').document.body.scrollHeight;
document.all.blockrandom.style.height = h + 20 + 'px';
}
}
</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

Publicité

miltonis

Hello!
UP!

miltonis

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

brisssou

8-/

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

miltonis

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?

FlorentG

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

miltonis

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 :

<script>
function actu_iframe(){
if(navigator.appName=="Microsoft Internet Explorer" ){
if(document.all) document.all.id_iframe.style.height = document.frames("id_iframe" ).document.body.scrollHeight;
else document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.scrollHeight;
}
else{
document.getElementById("id_iframe" ).style.height = document.getElementById("id_iframe" ).contentDocument.body.offsetHeight+"px";
}
}
</script>

et l'iframe appelant le JS

Code :

<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

miltonis

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

FlorentG

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*

nonau57

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>

Publicité

miltonis

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 :

<?php
class HTML_wrapper {
function displayWrap( &$row, &$params, &$menu ) {
?>
<script>
function setHeight()
{
var hauteur;
var iframe = document.getElementById( "mainframe" );
alert('ttt');
if( document.all ) {
hauteur = iframe.contentWindow.document.body.scrollHeight + 20;
} else {
alert(222);
hauteur = iframe.contentWindow.document.body.offsetHeight + 20;
alert(hauteur);
iframe.setAttribute( "height", hauteur ); }
}
</script>
<div class="contentpane<?php echo $params->get( 'pageclass_sfx' ); ?>">
<?php
if ( $params->get( 'page_title' ) ) {
?>
<div class="componentheading<?php echo $params->get( 'pageclass_sfx' ); ?>">
<?php echo $params->get( 'header' ); ?>
</div>
<?php
}
?>
<iframe style="width:100%; border:0px;" src="<?php echo $row->url; ?>" id="mainframe" onload="setHeight()"></iframe>
</div>
<?php
// displays back button
mosHTML::BackButton ( $params );
}
}
?>

merci encore...

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

FORUM HardWare.fr

Programmation

HTML/CSS

Adapter hauteur de iframe à son contenu

Sujets relatifs
IFRAME... comment bidouiller ?	hauteur div
Les inconvenients du iframe ?	[Résolu] [MySQL] Contenu du répertoire data
Afficher le contenu d'un site en php	[batch] problème de droits d'utilisateur
JavaScript heure	[PHP] - Suppr le contenu des balises <script></script> d'une page HTML
[C# .Net] Recuperer un chaine contenu dans un SubItems d'une Listview	[PHP] Gestion de contenu - Site dynamique
Plus de sujets relatifs à : Adapter hauteur de iframe à son contenu

Page générée en 0.050 secondes