Discussion :

[LePueblo]

Bonjour à tous!

Voici mon problème:
j'ai une page principale dans laquelle j'ai une iframe.
Dans cette iframe, j'ai une page qui me permet de suivre l'affichage de plein d'opérations que je fais.

Je voudrais que le scrollbar de l'iframe soit toujours en bas pour voir les dernières lignes affichées! (ça a l'air simple, mais je n'y arrive pas)

Solutions testées jusqu'ici:
- J'ai essayé de mettre une fonction "body onload" qui récupère l'Id (getElementsbyId) d'un input en bas de page pour lui donner le focus. Problème, moi j'ai pas besoin de zone input
- J'ai essayé de mettre une ancre toute simple en bas de page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a name="bas">

et de faire l'appel à la iframe comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<iframe src="moniframe.php#bas" name="fenetre" scrolling="auto">

mais le scroll reste en haut tant que l'iframe n'a pas fini de charger, puis se positionne en bas une fois que c'est fini.


Auriez vous des idées pour résoudre mon problème?
Merci d'avance!!

[Valki]

Bonjour,

Je ne comprends pas bien ton problème et ce que tu veux faire, cependant si tu utilises getElementById, tes éléments doivent être nommés en conséquence avec id="" et pas name="".

[LePueblo]

Bonjour Valki.
L'idée c'est de laisser le scrollbar en bas de la page, pendant qu'elle charge, et pas seulement de le mettre en bas une fois qu'elle a fini de charger.

Pour getElementsbyId, j'ai effectivement utilisé une balise comme celle ci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type='text' size="25" id='champ' name='Monchamp'><br>

que j'ai retrouvée grâce à son Id. Cependant cette solution ne résoud pas mon problème, le focus étant donné en fin de chargement et pas au cours du chargement...
Tu aurais une idée qui puisse me venir en aide?

[popo]

Et si tu essayais avec getElementsbyId

Y'a pas la mise en forme pour barrer le texte. Bref, tous ça pour dire que le "s" en rouge n'a pas sa place ici. D'ailleurs il faut un "B" (majuscule) pour ById.

C'est sensible à la casse...

[LePueblo]

En réalité, j'arrive à faire fonctionner le focus en récupérant l'Id avec la méthode getElementById (ça va comme ça?) mais cela ne résoud pas mon problème...

Problème, moi j'ai pas besoin de zone input

Cependant cette solution ne résoud pas mon problème, le focus étant donné en fin de chargement et pas au cours du chargement...

[Bisûnûrs]

Le contenu du onload est lancé après le chargement total de la page.

L'ancre est suivie au moment où elle apparait dans la page (logique, elle ne peut pas descendre si elle n'existe pas encore).

Une méthode serait de lancer une fonction en setInterval très rapide lors du chargement de la page, cette fonction positionnerait le scrollTop en fonction du scrollHeight, et sur le onload de la page il faudrait faire un clearInterval.

[SpaceFrog]

Bisu ...
heu un scroll sur le body ..
comment veux tu faire avant la fin du chargement du body ...
tu ne pourras pas mettre la main sur document.quoiquesoit avant qu'il soit instancié ...

Je crains qu'avant le chargement c'est a dire avant le lancement de l'evènement onload on ne puisse pas faire grand chose sauf à passer par un ajax ... le onlaod se declencherait quasi immédiatement et l'ajax se chargerait de rempli ma page ainsi les document.trucmachin seraient instanciés...

[LePueblo]

Merci pour ces pistes!
Je vais chercher dans le sens du setInterval...


SpaceFrog a dit:

tu ne pourras pas mettre la main sur document.quoiquesoit avant qu'il soit instancié ...

Oui, c'est exactement mon soucis
En réalité l'iframe appelle une page de traitement de données qui met un peu de temps à exécuter les opérations, en affichant au fur et à mesure ce qu'elle vient de finir. Du coup je ne peux pas savoir avant qu'elle soit instanciée ni si elle va bien se dérouler, ni jusqu'où elle va aller...
Le but c'est de fiare un genre de console de suivi de traitement.

[SpaceFrog]

le scroll sur l'iframe ...
ALors à condition que la page mère ait fini de charger tu peux dans la page mère avoir un setInterval comme proposait Bisu qui mets le scrollTop de l'iframe au maximum ...

[Bisûnûrs]

comment veux tu faire avant la fin du chargement du body ...
tu ne pourras pas mettre la main sur document.quoiquesoit avant qu'il soit instancié ...

Pourtant le document existe pendant le chargement de la page, c'est juste sa hauteur qui n'est pas définie encore.

Exemple :
http://josselin.willette.free.fr/test/index.html

Et voilà le code Javascript que j'y ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var i = setInterval('bla()', 5);
function bla()
{
  alert(document.documentElement.scrollHeight);
}

On voit bien lors du chargement de la page qu'on a plusieurs alertes avec des valeurs différentes.

[SpaceFrog]

et que donnerait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var i = setInterval('bla()', 5);
function bla()
{
document.documentElement.scrollTop=document.documentElement.scrollHeight;
}

[Bisûnûrs]

Apparemment, pas tout à fait le résultat escompté, manquerait plus que l'appel à la fonction bla juste après le clearInterval dans le onload du body. Mais le scroll descend bien durant le chargement.

[SpaceFrog]

tu as mis en ligne ?
parceque sous FFX ça bouge pas ...

oui juste un clear interval sur le onload

[Bisûnûrs]

C'est en ligne :
http://josselin.willette.free.fr/test/index.html

On voit bien le scroll qui s'"affole" parce que descend en même temps que le chargement.

[LePueblo]

Merci beaucoup pour cette solution, elle fonctionne du tonnerre!
Bravo!

Me reste plus qu'a mettre ça sur mon iframe =)

[LePueblo]

J'ai bien regardé la solution, mais j'ai trouvé un nouveau problème!(ce ne serait pas drôle, sinon)
Après plusieurs essais, je me suis rendu à l'évidence: les iframe, c'est horrible.

Me voilà donc parti sur de nouvelles bases en faisant défiler mon contenu dans un div.
Du coup le div a un scrollbar mais je n'arrive plus à le mettre en bas pendant que le div se remplit....

Voici ce que j'ai maladroitement fait:

Mon div trèèès très long qui met du temps à s'afficher:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="moniteur">
    lklfqskf
    lklfqskf
    lklfqskf
    lklfqskf
    lklfqskf
    ....
</div>

Mon CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#moniteur
	{	 
	overflow:auto;
	width: 800px;
	height: 250px;
	background-color:rgb(177,210,220);		  
	}

Mon body:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="clearInterval(i);bla();">

Et enfin mon script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script>
var i = setInterval('bla()', 5);
function bla()
{
var mondiv=document.getElementById("moniteur");
  mondiv.scrollTop=mondiv.scrollHeight;
}
</script>

Le scrollbar se positionne en effet en bas, mais uniquement après que tout soit affiché... Pourtant je ne comprends pas la différence fondamentale avec ce que tu as réalisé, Bisûnûrs.

[Bisûnûrs]

Simplement que dans mon cas, au moment où j'exécutais la fonction par le setInterval, le document existait. Or dans le tien, au moment de l'exécution ton div n'existe pas dans la page, et il n'existe qu'une fois créé, donc que le contenu est dedans, donc le scroll s'affiche tout en bas.

[LePueblo]

Mmhhh je vois.
Du coup l'iframe était une solution intéressante, pour le coup!

Le soucis c'est que toutes les manipulations de POST/GET de variables rend l'utilisation du div bien plus haléchante!

Pour résoudre le problème je vais essayer de lancer la fonction bla(); au cours de l'affichage, ça devrait rouler




Edit: Effectivement, ça roule! Merci pour la solution, Bisûnûrs!