Plusieurs source sur un iframe avec timer

Version imprimable

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:

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:

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 :-)

06/06/2021, 17h06
tag9724

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.

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:

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 :-)

06/06/2021, 22h01
tag9724
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

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:

<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:

<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 ? :oops::oops::oops::oops::oops::oops:

Code:

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

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:

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 */

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 :calim2:

Code:

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>

Citation:

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:

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:

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:

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:

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.

Bonjour,

Grand merci pour les explications et le temps pass� :D

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:

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:

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:

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

Citation:

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:

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/

08/06/2021, 20h25
Crachover

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 :D
08/06/2021, 21h06
tag9724

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 )

https://youtu.be/w4LmLgsUCRo

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.
08/06/2021, 21h12
Crachover
Et bien me revoici apr�s plusieurs tests... :D

Le code fonctionne je devais juste �tre patient, mais... :oops:

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 :
1. fiche1.htm
2. fiche2.htm
3. fiche3.htm
4. 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... :D

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

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:

<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:

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:

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:

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>

Bonjour,

Super, �a fonctionne nickel :D:D:D:D:D:D

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

Le <Style> de votre page...

Code:

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:

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

Code:

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 :-)

09/06/2021, 18h55
tag9724

Citation:

Envoy� par Crachover

Bonjour,

Super, �a fonctionne nickel :D:D:D:D:D:D

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 :)
09/06/2021, 20h16
Crachover

Merci :)