Plusieurs source sur un iframe avec timer

**Crachover** · 06/06/2021, 10h18

Bonjour,

J'aimerais pouvoir afficher plusieurs sources dans un laps de temps dans un iframe.

Pour le moment j'ai ceci qui fonctionne très bien... cela m'affiche bien un iframe avec un reload toutes le 2 minutes

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
<script type="text/javascript">
// ------------------------
window.onload=function() {
 
 
	 var reload_delay = 1000 * 1 * 121; // toutes les 2 minutes
 
  launch_count_down(reload_delay); // lance le compte à rebour
 
  window.setInterval(function() {
 
 
    window.frames.Example2.location.reload()
  }, reload_delay);		
};
</script>

Code html :

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

1
2
3
<body>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2"src="viewscorestv1.htm" frameborder=0  height=650px width=100% scrolling="No" marginheight="75" marginwidth="15"></iframe></div>
</body>

Ce que j'aimerais, c'est afficher plusieurs sources...

Exemple : commencer par la source : viewscorestv1.htm après 2 minutes passer à la source viewscorestv2.htm ainsi de suite et à la fin revenir à la source viewscorestv1.htm (faire une boucle)

Est-ce possible ? Avez-vous une solution pour moi ?

Merci d'avance :-)

**tag9724** · 06/06/2021, 17h06

Oui c'est parfaitement possible je t'ais fait un exemple ici si tu le souhaite https://jsfiddle.net/7xL3rs40/

Attention tout de même a ne pas re-charger en boucle les même données.

Dans l'exemple ici changer en continue l'attribut src de la balise iframe force à chaque fois le chargement de tout le site qu'elle contient.
Donc si tu souhaite afficher une iframe qui as déjà été chargée précédemment il faudra envisager par exemple de mettre plusieurs balise iframe et de les masquer avec un display:none en CSS, ça te permettra de juste réafficher celles déjà chargées précédemment au lieu de les recharger entièrement.

Si tes fichiers sont hébergés sur le même site tu peux aussi les charger via une requête Ajax au lieu d'utiliser une iframe.

**Crachover** · 06/06/2021, 21h01

Bonjour et merci pour votre réponse :-)

Mais je n'arrive pas à modifier mon code... Voici ma page... Elle affiche plusieurs iframe, le 1er avec une titre, le 2ème avec un tableau...

Le tableau [tab1.htm] est actualisé toute les deux minutes. Un décompte est aussi affiché bas de page ainsi que l'heure...

Ps : le tableau [tab1.htm] est modifié via un autre logiciel et envoyé via FTP...

J'ai maintenant plusieurs tableaux [tab1.htm], [tab2.htm], [tab3.htm]...

Ce que j'aimerais c'est passer d'un tableau à l'autre après les deux minutes affichées (décompte [count_down_div]) et revenir au 1er à la fin. Pas de clic etc...

Code HTML :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
 
<title>Cha&icirc;nes view TV</title>
<style>
body {
    background-color: black;
        margin:0px;
        margin-top:0px;
        
}</style>
<script type="text/javascript">
// ------------------------
window.onload=function() {
        
        
         var reload_delay = 1000 * 1 * 121; // toutes les 2 minutes
          
  launch_count_down(reload_delay); // lance le compte à rebour
        
  window.setInterval(function() {
 
          
    window.frames.Example2.location.reload()
    window.frames.messagei.location.reload()
  }, 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 = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000)+"''";
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Actualisation de l'écran 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();
  }
}
</script>
</head>
<body>
	<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1" src="menu3.htm" frameborder=0  height=91px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" src="tab1.htm" frameborder=0  height=650px width=100% scrolling="No" marginheight="75" marginwidth="15"></iframe></div>
<div style="background-color:#000000; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>
<span style='mso-ignore: vglayout; position: absolute; z-index: 2; margin-left: 18px; margin-top: 260px; left: 890px; top: 355px;'><div>
	<iframe id="messagei" name="messagei" title="messagei" src="messageiframe.php" frameborder=0  height=91px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe></div></span>	
<span style='mso-ignore: vglayout; position: absolute; z-index: 3; margin-left: 18px; margin-top: 300px; left: 980px; top: 355px;'><div>
	<iframe id="timeri" name="timeri" title="timeri" src="timeiframe.htm" frameborder=0  height=41px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe></div></span>	
</body>
</html>

Merci d'avance :-)

**tag9724** · 06/06/2021, 22h01

Donc si j'ai bien compris il faut que l'iframe Exemple2 plutôt que d'être rafraichie comme les autres ( avec un location.reload() donc ) change d'url toutes les deux minutes pour passer de tab1.htm à tab2.htm puis deux minutes plus tard encore à tab3.htm etc ... puis une fois arrivé au bout de tout les fichiers tabX.htm ré-afficher tab1.html ?

En sommes faire :

Charger tab1.htm
Attendre 2 minutes
Charger tab2.htm
Attendre 2 minutes
Charger tab3.htm
Attendre 2 minutes
Charger tab1.htm ( tab4.htm n'existe pas on revient a tab1.htm )
Attendre 2 minutes
...

Si oui le code que j'avais envoyer en exemple fait exactement ça, disons que le seul impératif ici est de connaitre a l'avance le nombre de pages tabX.htm pour savoir quand revenir a tab1.htm auquel cas il n'y auras pas d'autre solutions que de revenir a tab1.htm après avoir tenté sans succès de charger une page tabX.htm

**Crachover** · 07/06/2021, 08h13

Bonjour,

C'est exactement cela... :-)

Je dois donc "simplement" ajouter votre code ? Attention quand j'ajoute votre code, mon compte à rebours ne s'affiche plus ?

Code HTML :

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

<div style="background-color:#FFFFFF; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>

Comment modifier cette ligne :

Code html :

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

<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" src="tab1.htm" frameborder=0  height=650px width=100% scrolling="No" marginheight="75" marginwidth="15"></iframe></div>

J'aimerais aussi retirer le bouton de redémarrage... je sais à l'avance le nombre de page... pour le moment "3" [tab1.htm, tab2.htm, tab3.htm]

Pourriez-vous modifier mon code pour que tout fonctionne ?

Code HTML :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
 
<title>Cha&icirc;nes view TV</title>
<style>
body {
    background-color: black;
        margin:0px;
        margin-top:0px;
        
}</style>
<script type="text/javascript">
// ------------------------
window.onload=function() {
        
        
         var reload_delay = 1000 * 1 * 121; // toutes les 2 minutes
          
  launch_count_down(reload_delay); // lance le compte à rebour
        
  window.setInterval(function() {
 
          
    window.frames.Example2.location.reload()
    window.frames.messagei.location.reload()
  }, 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 = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000)+"''";
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Actualisation de l'écran 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();
  }
}
</script>
</head>
<body>
	<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1" src="menu3.htm" frameborder=0  height=91px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" src="tab1.htm" frameborder=0  height=650px width=100% scrolling="No" marginheight="75" marginwidth="15"></iframe></div>
<div style="background-color:#000000; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>
<span style='mso-ignore: vglayout; position: absolute; z-index: 2; margin-left: 18px; margin-top: 260px; left: 890px; top: 355px;'><div>
	<iframe id="messagei" name="messagei" title="messagei" src="messageiframe.php" frameborder=0  height=91px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe></div></span>	
<span style='mso-ignore: vglayout; position: absolute; z-index: 3; margin-left: 18px; margin-top: 300px; left: 980px; top: 355px;'><div>
	<iframe id="timeri" name="timeri" title="timeri" src="timeiframe.htm" frameborder=0  height=41px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe></div></span>	
</body>
</html>

Merci d'avance

**tag9724** · 07/06/2021, 15h20

Tient un exemple fonctionnel de comment modifier l'attribut src de l'iframe toute les deux minutes.
Ici il suffit de modifier la valeur de tabPageAmount si tu as besoin de rajouter ou d'enlever des pages tabX.htm.

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
    const tabPageAmount = 3
    let currentTabPage = 1
 
    const goToNextTabPage = () => {
      // On récupère l'élément iframe
      const iframe = document.getElementById("Example2");
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = ( currentTabPage % tabPageAmount ) + 1
 
      // On change le lien de l'iframe
      iframe.src = `tab${currentTabPage}.htm`
    }
 
    window.onload = function () {
      const reload_delay = 2 * 60 * 1000; // toutes les 2 minutes
      launch_count_down(reload_delay); // lance le compte à rebour
 
      window.setInterval(function () {
        goToNextTabPage()
        window.frames.messagei.location.reload()
      }, reload_delay);
    };
 
 
    /* La suite de ton code */

**Crachover** · 07/06/2021, 18h35

Merci pour le temps passé, mais cela ne fonctionne toujours pas, enfin je n'y arrive pas...

En plus de compte à rebours ne s'affiche plus en dessous à gauche

Code HTML :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Challenge interne view TV</title>
<style>
body {
    background-color: white;
        margin:0px;
        margin-top:0px;
        
}</style>
<script type="text/javascript">
        
        
        
        
        const currentTabPage = [
  "https://www.cip.be/",
  "tabcip.htm",
  "tabcip2.htm",
  "tabcip3.htm"
]
 
const tabPageAmount = 3
    let currentTabPage = 1
 
    const goToNextTabPage = () => {
      // On récupère l'élément iframe
      const iframe = document.getElementById("Example2");
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = ( currentTabPage % tabPageAmount ) + 1
 
      // On change le lien de l'iframe
      iframe.src = `tab${currentTabPage}.htm`
    }
 
    window.onload = function () {
      const reload_delay = 2 * 60 * 1000; // toutes les 2 minutes
      launch_count_down(reload_delay); // lance le compte à rebour
 
      window.setInterval(function () {
        goToNextTabPage()
        window.frames.messagei.location.reload()
      }, 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 = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000)+"''";
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Actualisation de l'écran 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();
  }
}
</script>
 
</head>
 
<body>
 
<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1" src="menutab.htm" frameborder=0  height=55px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>	</div>
 
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" frameborder=0  height=640px width=100% scrolling="No" marginheight="4" marginwidth="0"></iframe>	</div>
 
<div style="background-color:#FFFFFF; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>
 
</body>
 
</html>

**tag9724** · 07/06/2021, 19h28

Envoyé par Crachover

Merci pour le temps passé, mais cela ne fonctionne toujours pas, enfin je n'y arrive pas...

Pas de soucis, je vais me prendre le temps de t'expliquer ce qui ne vas pas.

Dans le morceau de code que j'avais envoyé j'assumais que tout les liens de l'iframe se suivent :

tab1.htm
tab2.htm
tab3.htm

De ce fait la variable const tabPageAmount = 3 représente le nombre de pages tabX.htm disponibles.

La fonction goToNextTabPage() vas a chaque fois qu'elle est appelée changer le lien de l'iframe vers la page tabX.htm suivante.

Appelle goToNextTabPage()
l'iframe affiche tab2.htm
Appelle goToNextTabPage()
l'iframe affiche tab3.htm
Appelle goToNextTabPage()
l'iframe affiche tab1.htm ( tab4.htm n'existe pas )
Appelle goToNextTabPage()
l'iframe affiche tab2.htm
[...]

Pour garder en mémoire quel page est affichée une variable let currentTabPage = 1 vas être incrémentée a chaque itération et revenir a 1 si sa valeur est plus grande que tabPageAmount.

Code :

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

1
2
// On passe a la page suivante ( ou revient a la première au besoin )
currentTabPage = ( currentTabPage % tabPageAmount ) + 1

Quand on change le lien de l'iframe le code suivant fonctionne donc comme ceci :
`tab${currentTabPage}.htm` peux se lire de la sorte `tab1.htm`, `tab2.htm` ou encore `tab3.htm`

Code :

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

1
2
// On change le lien de l'iframe
iframe.src = `tab${currentTabPage}.htm`

Dans le tout dernier code que tu as envoyé tu as donc essayé de faire sorte que l'iframe tourne selon une liste de liens ( dans un array donc ), ce n'est pas impossible d'intégrer cette logique avec le code actuel mais ça requiert quelques modifications que voici :

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
    const tabsPages = [
      "https://www.cipale.be/",
      "tabcipale.htm",
      "tabcipale2.htm",
      "tabcipale3.htm"
    ]
 
    let currentTabPage = 0
 
    const goToNextTabPage = () => {
      // On récupère l'élément iframe
      const iframe = document.getElementById("Example2");
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = (currentTabPage + 1) % tabsPages.length
 
      // On change le lien de l'iframe
      iframe.src = tabsPages[currentTabPage]
    }
 
    window.onload = function () {
      const reload_delay = 2 * 60 * 1000; // toutes les 2 minutes
      launch_count_down(reload_delay); // lance le compte à rebour
 
      window.setInterval(function () {
        goToNextTabPage()
        window.frames.messagei.location.reload()
      }, reload_delay);
    };
 
    /* Le reste du code */

Voila j'espère que l'on auras fait le tour de la question, quelques petites notes pour finir a la rigueur :

Attention en javascript a ne pas déclarer plusieurs fois de suite une même variable

Code :

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

1
2
3
4
5
6
7
8
9
        const currentTabPage = [
  "https://www.cipale.be/",
  "tabcipale.htm",
  "tabcipale2.htm",
  "tabcipale3.htm"
]
 
const tabPageAmount = 3
    let currentTabPage = 1 // Plantera, currentTabPage est déjà déclarée comme constante plus haut

Quand tu code en javascript n'hésite pas a ouvrir les outils de développement de ton navigateur ( Clique droit inspecter l'élément ou F12 ), tu a notamment un onglet console qui affiche les erreurs qui sont survenues.

**Crachover** · 08/06/2021, 12h12

Bonjour,

Grand merci pour les explications et le temps passé

Effectivement j'aimerais utiliser une liste pour mes pages à afficher.

Mais, j'arrive toujours pas à afficher les pages et a afficher le décompte qui devrait en théorie s'afficher en dessous à gauche. (le décompte s'affiche si je retire votre code)

Code html :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Challenge interne view TV</title>
<style>
body {
    background-color: white;
        margin:0px;
        margin-top:0px;
        
}</style>
<script type="text/javascript">
// ------------------------
        
        // ------------------------     
        
        const tabsPages = [
      "https://www.google.be/",
      "tabcip.htm",
      "tabcip2.htm",
      "tabcip3.htm"
    ]
 
    let currentTabPage = 0
 
    const goToNextTabPage = () => {
      // On récupère l'élément iframe
      const iframe = document.getElementById("Example2");
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = (currentTabPage + 1) % tabsPages.length
 
      // On change le lien de l'iframe
      iframe.src = tabsPages[currentTabPage]
    }
 
    window.onload = function () {
      const reload_delay = 2 * 60 * 1000; // toutes les 2 minutes
      launch_count_down(reload_delay); // lance le compte à rebour
 
      window.setInterval(function () {
        goToNextTabPage()
        window.frames.messagei.location.reload()
      }, 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 = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000)+"''";
  window.setInterval(function() {
    count_down += count_delay;
    count_down_div.textContent = "Actualisation de l'écran 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();
  }
}
</script>
</head>
<body>
		<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1" src="menutab.htm" frameborder=0  height=55px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" frameborder=0  height=640px width=100% scrolling="No" marginheight="4" marginwidth="0"></iframe></div>
<div style="background-color:#FFFFFF; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>
</body>
</html>

Cette ligne semble ne pas se lancer... dans mon éditeur elle semble même inactive (pas de couleur de code), est-ce parce que votre code utilise des const tandis que le mein des var ?

Code :

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

launch_count_down(reload_delay); // lance le compte � rebour

J'ai certainement un problème dans la page... car rien ne se passe... peut-être aussi ici, pas de source...

Code html :

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

<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" frameborder=0  height=640px width=100% scrolling="No" marginheight="4" marginwidth="0"></iframe></div>

**tag9724** · 08/06/2021, 18h26

Mais, j'arrive toujours pas à afficher les pages et a afficher le décompte qui devrait en théorie s'afficher en dessous à gauche. (le décompte s'affiche si je retire votre code)
[...]
Cette ligne semble ne pas se lancer... dans mon éditeur elle semble même inactive (pas de couleur de code), est-ce parce que votre code utilise des const tandis que le mein des var ?

Je ne sais pas quel éditeur de code tu utilise pour ma part je n'ais aucun soucis dans VsCode mais il est possible qu'aussi bien ton éditeur que ton navigateur ne supportent pas des syntaxes plus "moderne" de javascript comme const, let ou encore les fonctions fléchées, dans le cas de ton éditeur la coloration syntaxique pourras être hasardeuse quand au navigateur le code plantera.

Je ne sais pas quel navigateur tu utilise je ne peux que supposer que tu utilise internet explorer car je ne vois pas trop sinon quel autre navigateur aujourd'hui ne supporte pas ça, dans tout les cas j'ai modifié tout le code pour fixer toutes les erreurs dans le HTML et utiliser une syntaxe en JS qui ne plantera pas sur de plus anciens navigateurs ( testé sous internet explorer 9, fonctionne ).

Code html :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Challenge interne view TV</title>
 
  <style>
    body {
      background-color: white;
      margin: 0px;
      margin-top: 0px;
    }
 
    iframe {
      width: 100%;
      overflow: hidden;
      border: none;
    }
 
    iframe#Example1 {
      margin: 0;
      height: 55px;
    }
 
    iframe#Example2 {
      margin: 4px 0 0 0;
      height: 640px;
    }
 
    #count_down_div {
      background-color: #FFFFFF;
      font-family: Calibri, sans-serif;
      color: #A6A6A6;
      font-size: 10.0pt;
      font-style: italic;
      text-align: left;
    }
  </style>
</head>
 
<body>
 
  <!-- Iframes -->
 
  <div id="bandeau">
    <iframe id="Example1" name="Example1" title="Example1" src="menutab.htm"
      scrolling="no"></iframe>
  </div>
 
  <div id="contenu">
    <iframe id="Example2" name="Example2" title="Example2"></iframe>
  </div>
 
  <!-- Compte à rebours -->
 
  <div id="count_down_div"></div>
 
  <!-- Javascript -->
 
  <script>
 
    var reload_delay = 2 * 60 * 1000; // toutes les 2 minutes
    var tabsPages = [
      "tabcip.htm",
      "tabcip2.htm",
      "tabcip3.htm"
    ]
 
 
    // ------------------------
 
    var currentTabPage = 0
 
    function goToNextTabPage() {
      // On récupère l'élément iframe
      var iframe = document.getElementById("Example2");
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = (currentTabPage + 1) % tabsPages.length
 
      // On change le lien de l'iframe
      iframe.src = tabsPages[currentTabPage]
    }
 
 
    // ------------------------
 
    function launch_count_down(count_down_delay) {
      var count_down_div = document.getElementById("count_down_div");
      var count_down = 0;
      var count_delay = 1000; // a chaque seconde
      count_down_div.textContent = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000) + "''";
 
      window.setInterval(function () {
        count_down += count_delay;
        count_down_div.textContent = "Actualisation de l'écran 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);
 
      // supérieur à 1 heure
      if (secondes > 60 * 60) {
        return temps.getHours() - 1 + ":" + temps.getMinutes() + "' " + temps.getSeconds()
      } else {
        return temps.getMinutes() + "' " + temps.getSeconds();
      }
    }
 
 
    // ------------------------
 
    // lance le compte à rebour
    launch_count_down(reload_delay);
 
    // Lance l'actualisation des iframes
    window.setInterval(function () {
      goToNextTabPage()
 
      // Retiré étant donner que l'iframe #messagei n'existe pas dans la page
      // window.frames.messagei.location.reload()
    }, reload_delay);
 
  </script>
 
</body>
 
</html>

N'hésite pas non plus comme dit a utiliser les outils de développement de ton navigateur ils te permettrons de déceler beaucoup plus rapidement ou et pourquoi ton code plante, tu as une partie dédiée a ces derniers dans ce tutoriel https://developer.mozilla.org/fr/doc...pt/First_steps

D'autres outils que tu peux aussi utiliser pour vérifier les erreurs dans ton code ont étés listés ici récemment par ProgElecT et xor AX AX
https://www.developpez.net/forums/d2...ss-javascript/

**Crachover** · 08/06/2021, 20h25

Bonjour et encore merci...

Je ne comprends rien... je colle votre code, maintenant le compte à rebours fonctionne mais aucune page ne s'affiche dans l'iframe, de plus j'ai remarqué et pourtant se sont les mêmes valeurs, que les dimensions des iframe, marges etc... ne sont plus correct visuellement avec votre code.

Auriez-vous une adresse mail pour que je vous envoi directement mon dossier avec le fichier qui fonctionne avec un iframe et le votre ?

Bonne soirée

**tag9724** · 08/06/2021, 21h06

Pour ma part je ne sais pas vraiment quoi dire, je pense qu'il me manque des informations et je ne vois comment faire plus en l'état.

La version de test du site que j'ai mis en place fonctionne même sous internet explorer et sans serveur web comme le montre cette vidéo ( l'interval est passé de 2min à 5s pour la démonstration )

Ca ne me dérange pas de poursuivre la discutions en message privés sur le forum au besoin mais comme dit sans plus de contexte je ne pourrais pas plus aider.

**Crachover** · 08/06/2021, 21h12

Et bien me revoici après plusieurs tests...

Le code fonctionne je devais juste être patient, mais...

Il faut attendre les deux premières minutes avant de voir apparaitre le premier lien qui est le second lien de la liste. Après la fin de la liste, le premier lien apparait ensuite.

En résumé si la liste est :

fiche1.htm
fiche2.htm
fiche3.htm
fiche4.htm

Lorsque je lance le fichier, il faut attendre les deux premières minutes pour voir apparaitre la fiche2, ensuite après deux minutes la fiche3 etc... après la fiche4, c'est bien la fiche1 qui apparait seulement...

Ps : et je confirme, il tourne très bien sous FireFox, Edge, Chrome et même Internet Explorer...

**tag9724** · 08/06/2021, 21h29

C'est de ma faute désolé, je me suis trop concentrer à vouloir faire fonctionner le code en JS que j'en ais oublié que ce serais une bonne idée qu'en arrivant sur la page la première iframe charge et affiche quelque chose.

La solution est toute simple en plus, il suffit de rajouter un attribut src a l'iframe comme ceci

Code html :

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

<iframe id="Example2" name="Example2" title="Example2" src="fiche1.htm"></iframe>

Ou bien la seconde solution serais de modifier légèrement la fonction goToNextTabPage et de l'appeler directement une première fois ( en même temps qu'avec le setInterval )

Code :

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

1
2
3
4
5
6
7
8
9
10
    function goToNextTabPage() {
      // On récupère l'élément iframe
      var iframe = document.getElementById("Example2");
 
      // On change le lien de l'iframe
      iframe.src = tabsPages[currentTabPage]
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = (currentTabPage + 1) % tabsPages.length
    }

Puis plus loin donc

Code :

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

1
2
3
4
5
6
7
8
9
10
11
    // lance le compte à rebour
    launch_count_down(reload_delay);
    goToNextTabPage();
 
    // Lance l'actualisation des iframes
    window.setInterval(function () {
      goToNextTabPage()
 
      // Retiré étant donner que l'iframe #messagei n'existe pas dans la page
      // window.frames.messagei.location.reload()
    }, reload_delay);

Et juste pour être sur voici le code dans son intégralité avec la seconde solution d'implémentée

Code html :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Challenge interne view TV</title>
 
  <style>
    body {
      background-color: white;
      margin: 0px;
      margin-top: 0px;
    }
 
    iframe {
      width: 100%;
      overflow: hidden;
      border: none;
    }
 
    iframe#Example1 {
      margin: 0;
      height: 55px;
    }
 
    iframe#Example2 {
      margin: 4px 0 0 0;
      height: 640px;
    }
 
    #count_down_div {
      background-color: #FFFFFF;
      font-family: Calibri, sans-serif;
      color: #A6A6A6;
      font-size: 10.0pt;
      font-style: italic;
      text-align: left;
    }
  </style>
</head>
 
<body>
 
  <!-- Iframes -->
 
  <div id="bandeau">
    <iframe id="Example1" name="Example1" title="Example1" src="menutab.htm"></iframe>
  </div>
 
  <div id="contenu">
    <iframe id="Example2" name="Example2" title="Example2"></iframe>
  </div>
 
  <!-- Compte à rebours -->
 
  <div id="count_down_div"></div>
 
  <!-- Javascript -->
 
  <script>
 
    var reload_delay = 2 * 60 * 1000; // toutes les 2 minutes
 
    var tabsPages = [
      "fiche1.htm",
      "fiche2.htm",
      "fiche3.htm",
      "fiche4.htm"
    ];
 
    // ------------------------
 
    var currentTabPage = 0
 
    function goToNextTabPage() {
      // On récupère l'élément iframe
      var iframe = document.getElementById("Example2");
 
      // On change le lien de l'iframe
      iframe.src = tabsPages[currentTabPage]
 
      // On passe a la page suivante ( ou revient a la première au besoin )
      currentTabPage = (currentTabPage + 1) % tabsPages.length
    }
 
 
    // ------------------------
 
    function launch_count_down(count_down_delay) {
      var count_down_div = document.getElementById("count_down_div");
      var count_down = 0;
      var count_delay = 1000; // a chaque seconde
      count_down_div.textContent = "Actualisation de l'écran dans " + heures_minutes_secondes((count_down_delay) / 1000) + "''";
 
      window.setInterval(function () {
        count_down += count_delay;
        count_down_div.textContent = "Actualisation de l'écran 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);
 
      // supérieur à 1 heure
      if (secondes > 60 * 60) {
        return temps.getHours() - 1 + ":" + temps.getMinutes() + "' " + temps.getSeconds()
      } else {
        return temps.getMinutes() + "' " + temps.getSeconds();
      }
    }
 
 
    // ------------------------
 
    // lance le compte à rebour
    launch_count_down(reload_delay);
    goToNextTabPage();
 
    // Lance l'actualisation des iframes
    window.setInterval(function () {
      goToNextTabPage()
 
      // Retiré étant donner que l'iframe #messagei n'existe pas dans la page
      // window.frames.messagei.location.reload()
    }, reload_delay);
 
  </script>
 
</body>
 
</html>

**Crachover** · 09/06/2021, 18h34

Bonjour,

Super, ça fonctionne nickel

Juste un truc que je ne comprends pas, mais bon ce n'est pas grave...

Le <Style> de votre page...

Code HTML :

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
<style>
    body {
      background-color: white;
      margin: 0px;
      margin-top: 0px;
    }
 
    iframe {
      width: 100%;
      overflow: hidden;
      border: none;
    }
 
    iframe#Example1 {
      margin: 0;
      height: 55px;
    }
 
    iframe#Example2 {
      margin: 4px 0 0 0;
      height: 640px;
    }
 
    #count_down_div {
      background-color: #FFFFFF;
      font-family: Calibri, sans-serif;
      color: #A6A6A6;
      font-size: 10.0pt;
      font-style: italic;
      text-align: left;
    }
  </style>

... ne rend pas la même chose que mon code à moi, et pourtant se sont les mêmes valeurs...

Code HTML :

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

1
2
3
4
5
6
7
  <style>
    body {
    background-color: white;
        margin:0px;
        margin-top:0px;
    }
  </style>

et

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
  <div id="bandeau">
    <iframe id="Example1" name="Example1" title="Example1" src="menutab.htm" frameborder="0" height="59px" width="100%" scrolling="No" marginheight="0" marginwidth="0"></iframe>
  </div>
 
  <div id="contenu">
    <iframe id="Example2" name="Example2" title="Example2" frameborder="0" height="637px" width="100%" scrolling="No" marginheight="0" marginwidth="0"></iframe>
  </div>
 
  <!-- Compte à rebours -->
 
  <div style="background-color:#FFFFFF; font-family:Calibri, sans-serif; color:#A6A6A6; font-size:10.0pt;font-style:italic; text-align:left;" id="count_down_div"></div>

Je dois par exemple modifier 55px en 59px, 640 en 637px, je dois aussi mettre des valeurs négatives sur des marges si je veux garder le même visuel, pourquoi ??

Encore merci :-)

**tag9724** · 09/06/2021, 18h55

Envoyé par Crachover

Bonjour,

Super, ça fonctionne nickel

Ca fait plaisir a entendre.

Pour ce qui touche de l'apparence même de la page il faudra que tu te prenne le temps de modifier le style des différents éléments, la on ne touche plus a du Javascript mais à du CSS.

Tu pourras trouver de bonnes ressources si tu le souhaite pour apprendre comment mettre en forme ta page web ici
https://developer.mozilla.org/fr/doc...etting_started

Et si tu n'as pas trop de difficultés avec l'anglais le site du w3school as aussi d'excellentes ressources
https://www.w3schools.com/css/default.asp

Bon courage donc pour la suite

**Crachover** · 09/06/2021, 20h16

Merci

Plusieurs source sur un iframe avec timer

JavaScript

Discussions similaires

Partager

Partager