Discussion :

[Crachover]

Bonjour,

J'aimerais afficher un compte à rebours sur ma page WEB, qui correspond à mes script de refresh... voici les codes utilisés. Ils fonctionnent le problème n'est pas là... :-)

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
window.onload=function() {
  window.setInterval(function() {
    window.frames.Example2.location.reload()
  },1000*120)
}
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.onload = function() {
  var URLs = [
    "fiche1.htm",
    "fiche2.htm",
    "fiche3.htm"
  ];
  var URLsLen = URLs.length;
  var ii = 0;
  var iframe2 = document.getElementById('Example2');
  iframe2.src = URLs[0]; //
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
 // }, 1000 * 60 * 2); // toutes les 2 minutes
 }, 1000 * 15); // toutes les 3 s (EN TEST !)
};
</script>

Merci d'avance pour votre aide :-)

[Invité]

Bonjour,

la solution est donnée dans cette discussion récente.

[Crachover]

Bonjour,

Le code suivant fonctionne, mais je n'arrive pas à la "fusionner" avec mes deux codes à moi...

Code qui fonctionne...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
"use strict";
function launch_count_down()
{
  // ici : le rechargement
  let reload_delay = 1000 * 60 * 30; // toutes les 30 minutes
  setTimeout("document.location.href='Essai.php?bascule=0'", reload_delay);
 
  // Compte à rebours
  let count_down_div = document.getElementById("count_down_div");
  let count_down_delay = 1000 * 1; // toutes les 1 secondes
  let count_down = 0;
  count_down_div.textContent = 'Rechargement dans ' + heures_minutes_secondes( (reload_delay - count_down)/1000 );
  window.setInterval(function() {
    count_down += count_down_delay;
    count_down_div.textContent = 'Rechargement dans ' + heures_minutes_secondes( (reload_delay - count_down)/1000 );
    if (count_down >= reload_delay) { count_down = 0; }
  }, count_down_delay);
}
 
function heures_minutes_secondes( secondes )
{
    let temps = new Date();
    temps.setTime(secondes*1000);
  if( secondes > 60 * 60) // supérieur à 1 heure
  {
    return (temps.getHours()-1)+":"+temps.getMinutes()+":"+temps.getSeconds();
  } else {
    return temps.getMinutes()+":"+temps.getSeconds();
  }
}
 
//window.onload = launch_count_down;
document.addEventListener('DOMContentLoaded', function(event) {
  launch_count_down();
});

Code :

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

<div id="count_down_div"></div>

Mes deux codes...

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
window.onload=function() {
  window.setInterval(function() {
    window.frames.Example2.location.reload()
  },1000*120)
}
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.onload = function() {
  var URLs = [
    "fiche1.htm",
    "fiche2.htm",
    "fiche3.htm"
  ];
  var URLsLen = URLs.length;
  var ii = 0;
  var iframe2 = document.getElementById('Example2');
  iframe2.src = URLs[0]; //
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
 // }, 1000 * 60 * 2); // toutes les 2 minutes
 }, 1000 * 15); // toutes les 15 s (EN TEST !)
};
</script>

[NoSmoking]

Bonjour,
si tu écrits deux affectations, window.onload=function() {, la dernière affectation REMPLACE les précédentes affectations.

Une solution consiste à mettre TOUS tes appels dans le window.onload.

Un autre consiste à utiliser addEventListener, en groupant ou non tous tes apples/fonctions.

[Crachover]

Bonjour,

Merci pour les informations, mais n'étant pas "du tout" un pro en JavaScript, je sèche un max...

Serait-ce abuser de vous demander un exemple avec par exemple mon premier code, voir les deux... ?

Ps : Cette page sera affichée sur une TV, et juste pour info, ma TV n'accepte pas les LET, elle veut obligatoirement des VAR pour déclarer les variables...

Merci d'avance

[Watilin]

Moi ce qui me surprend c’est que tu as d’un côté un script qui rafraîchit l’iframe, et de l’autre côté un script qui change l’URL de la même iframe. Faire les deux à la fois, c’est inefficace car ça crée du trafic inutile.

Pourrais-tu nous expliquer, en langage courant, ce que tes scripts de refresh sont censés faire ?

[Crachover]

Bonjour,

Les deux script sont effectivement très différents, le premier fait un 'simple' refresh d'une iFrame , l'autre change le contenu d'un iFrame ... pourquoi...

J'ai créé en Excel un fichier ou je rentre les résultats des matchs de tennis du week-end de mon club, lorsque je sauve cette page, elle créé des fichiers HTML et les envoies en FTP sur le WEB, le premier reprend la totalité des matchs du week-end et l'affiche sur une SMART TV, et un refresh est fait toutes les 2 minutes pour actualiser la page.

le problème est qu'il y a beaucoup d'informations sur cette page, donc pas très lisible sur certaine TV... C'est là que le 2ème script intervient... mon fichier Excel créé aussi plusieurs pages reprenant sur chacune d'elles 5 matchs... et le script affiche ces pages...

voila pourquoi les deux fichiers sont différents. Mais ils ont une chose en commun, il y a une temporisation, soit pour faire un refresh, soit pour charger la page avec un URL différent... et c'est cette temporisation que j'aimerais afficher...

Pourquoi des iFrame, parce que mes pages contiennent un iFrame avec un "titre" et un autre iFrame avec la ou les pages à afficher... et comme il y a des 'refresh' assez souvent, j'ai allégé le truc en ne chargeant le titre qu'une fois...

J'aimerais donc pouvoir afficher le temps restant avant 'refresh' ou changement de page sur l'iFrame 'titre' ou l'autre...

Voili voilo

[Invité]

Bonjour,

1- On en avait parlé dans une discussion précédente.
Et son utilisation sur une télévision.

...Les deux script sont effectivement très différents, le premier fait un 'simple' refresh d'une iFrame , l'autre change le contenu d'un iFrame ...

2- NON.

1. ils font à peu près la MEME CHOSE (recharger/charger une iframe)
2. il s'agit de LA MEME iframe !

3- Le 2ème script est censé remplacer le 1er ! Pas venir s'ajouter...
D'ailleurs, comme l'a remarqué NoSmoking, seul le 2ème est exécuté !
Tu peux supprimer le 1er.

Au fait : tu as remarqué que tu changeais de page toutes les 15 secondes ?

Code :

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

1
2
 // }, 1000 * 60 * 2); // toutes les 2 minutes
 }, 1000 * 15); // toutes les 15 s (EN TEST !)

4- Concernant le compte à rebours :
Où vas-tu mettre le code d'affichage : <div id="count_down_div"></div> ?

[Invité]

Voilà ton code :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// ------------------------
window.onload = function() {
  var URLs = [
    "fiche1.htm",
    "fiche2.htm",
    "fiche3.htm"
  ];
  var URLsLen = URLs.length;
  var ii = 0;
  var iframe2 = document.getElementById("Example2");
 
  var reload_delay = 1000 * 60 * 2; // toutes les 2 minutes
  iframe2.src = URLs[0];
 
  launch_count_down(reload_delay); // lance le compte à rebours
 
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
  }, reload_delay);
};
 
// ------------------------
function launch_count_down(count_down_delay) {
  // Compte à rebours
  var count_down_div = document.getElementById("count_down_div");
  var count_down = 0;
  var count_delay = 1000; // a chaque seconde
  count_down_div.textContent = "Rechargement dans " + heures_minutes_secondes((count_down_delay) / 1000);
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Rechargement dans " + heures_minutes_secondes((count_down_delay - count_down) / 1000);
    if( count_down == count_down_delay ){
      count_down = 0; // on réinitalise
    }
  }, count_delay);
}
 
// ------------------------
function heures_minutes_secondes(secondes) {
  var temps = new Date();
  temps.setTime(secondes * 1000);
  if (secondes > 60 * 60) {
    // supérieur à 1 heure
    return (
      temps.getHours() - 1 + ":" + temps.getMinutes() + ":" + temps.getSeconds()
    );
  } else {
    return temps.getMinutes() + ":" + temps.getSeconds();
  }
}

Cela dit : 15 secondes, c'est largement suffisant pour lire une page !
Et les 3 pages sont affichées en moins d'une minute...

[Crachover]

Tout fonctionne super

Merci beaucoup