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

Plusieurs source sur un iframe avec timer

JavaScript

Vue hybride

Discussions similaires

Partager

Partager