Changer la source d'une iFrame toutes les deux minutes et rafraichir l'Iframe en question

Version imprimable

23/07/2018, 14h14
CrasherSEP

Changer la source d'une iFrame toutes les deux minutes et rafraichir l'Iframe en question
Bonjour,

J'ai une page Web contenant 2 IFrames (le titre et le contenu)

L'iFrame du contenu s'actualise toutes les deux minutes grâce à une ligne de code.

J'aimerais maintenant pouvoir changer la source de l'iFrame CONTENU par plusieurs autres sources.

Exemple:
- source 1 : /pages/contenu1.html
- source 2 : /pages/contenu2.html
- source 3 : /pages/contenu3.html
- source 4 : /pages/contenu4.html
- source 5 : /pages/contenu5.html
- ...
Donc, quand la page je charge pour la première fois, c'est le contenu1 qui s'affiche, après deux minutes le contenu 2, puis le trois et à la fin cela relance le contenu 1...

Pourriez-vous m'aider ?
Grand merci d'avance
23/07/2018, 15h14
Invité

Bonjour,

montre le code actuel.

Bonjour,

Voilà mon code à moi, et j'aimerais pouvoir changer la source de Example2 par exemple toutes les 2 minutes avec un autre fichier que viewscorestv.htm comme par exemple viewscorestv2.htm puis viewscorestv3.htm puis viewscorestv4.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
27
28
<!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=iso-8859-1">
<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() {
  window.setInterval(function() {
    window.frames.Example2.location.reload()
  },1000*180)
}
</script>
</head>
<body>
	<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1"src="menu.htm" frameborder=0  height=58px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2"src="viewscorestv.htm" frameborder=0  height=555px width=100% scrolling="No" marginheight="2" marginwidth="105"></iframe></div>
</body>
</html>

CrasherSEP : Si tu trouves, je suis preneur...

Merci d'avance pour vos lumières :-)
Bonne soirée

25/07/2018, 11h53
CrasherSEP

Pour le moment je ne trouve pas et pourtant je cherche... 8O

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"use strict";
window.onload = function() {
  let URLs = [
    "page1.htm",
    "page2.htm",
    "page3.htm",
    "page4.htm"
  ];
  let URLsLen = URLs.length;
  let ii = 0;
  window.setInterval(function() {
    window.frames.Example2.src = URLs[ii % URLsLen]; // (% : modulo)
    ii++;
  }, 1000 * 60 * 2); // toutes les 2 minutes
};

N.B. 2 minutes, c'est long.
C'est trèèèèèèèès looooooooooooooooooong.........

Bonjour,

Merci pour votre réponse :D mais je n'y arrive pas... :?

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
<!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=iso-8859-1">
<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">
"use strict";
window.onload = function() {
  let URLs = [
    "contenu1.htm",
    "contenu2.htm",
    "contenu3.htm"
  ];
  let URLsLen = URLs.length;
  let ii = 0;
  window.setInterval(function() {
    window.frames.Example2.src = URLs[ii % URLsLen]; // (% : modulo)
    ii++;
  }, 1000 * 60 * 2); // toutes les 2 minutes
};
</script>
</head>
<body>
	<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1" src="menu.htm" frameborder=0  height=58px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" frameborder=0  height=555px width=100% scrolling="No" marginheight="2" marginwidth="105"></iframe></div>
</body>
</html>

Que veut dire : "use strict" ? & à mon avis, je dois surement insérer un morceau de code dans l'iFrame 'Example2"... :roll:

25/07/2018, 13h53
Invité

Code:

<iframe src="" id="Example2"....

Bon... je suis peut-être débile, mais je n'y arrive pas !

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
<!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=iso-8859-1">
<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">
"use strict";
window.onload = function() {
  let URLs = [
    "contenu1.htm",
    "contenu2.htm",
    "contenu3.htm"
  ];
  let URLsLen = URLs.length;
  let ii = 0;
  window.setInterval(function() {
    window.frames.Example2.src = URLs[ii % URLsLen]; // (% : modulo)
    ii++;
  }, 1000 * 60 * 2); // toutes les 2 minutes
};
</script>
</head>
<body>
	<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1" src="menu.htm" frameborder=0  height=58px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe src="" id="Example2" name="Example2" title="Example2" frameborder=0  height=555px width=100% scrolling="No" marginheight="2" marginwidth="105"></iframe></div>
</body>
</html>

25/07/2018, 15h14
Invité

"je n'y arrive pas", "ça ne marche pas",......

Avec ça, on est bien avancé.
25/07/2018, 15h24
CrasherSEP

Mon code ne fonctionne pas et je ne trouve pas pourquoi ?, le menu.htm (iFrame - Example1) est bien affiché, mais rien pour l'iFrame - Example2, écran noir. Il n'affiche pas la page contenu1.htm...

OK.
Après test, il n'y a pas de src au départ (donc, durant les 2 premières minutes !).

Alors essaie :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"use strict";
window.onload = function() {
  let URLs = [
    "contenu1.htm",
    "contenu2.htm",
    "contenu3.htm"
  ];
  let URLsLen = URLs.length;
  let ii = 0;
  let 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 * 3); // toutes les 3 s (EN TEST !)
};

25/07/2018, 15h48
CrasherSEP
Merci, merci, merci, merci ;););););)

Une dernière petite chose si je peux abuser... sur une de mes pages, j'utilise le code suivant pour n'actualiser QUE l'iFrame EXAMPLE2. Est-il possible de faire la même chose avec ce code, car il actualise la page dans ça globalité... ?
Code:

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>
Cette ligne semble vouloir faire cela, mais sur mon écran , j'ai un refresh total...

Code:

let iframe2 = document.getElementById('Example2');

Ps : J'affiche cette page sur un écran TV, donc comme le rafraichissement est plus lent sur une TV, j'aimerais éviter un Refresh total... :D
25/07/2018, 16h45
Invité

??? :koi:
C'est ce que fait mon code, non ?

Ou alors je n'ai pas compris.
25/07/2018, 16h50
CrasherSEP

Oui, cela devrait ce faire grâce à la ligne 8-)

Code:

let iframe2 = document.getElementById('Example2');

Mais sur mon écran TV, non...

Ps : je testerai sur un autre écran ce soir... :roll:

Ps2 : Mais sur mon PC, cela fonctionne, donc à mon avis c'est l'écran... Donc le code est bon :)

Teste avec :

Code:

1
2
3
4
5
  window.setInterval(function() {
    ii++;
    iframe2.src = URLs[ii % URLsLen]; // (% : modulo)
    iframe2.location.reload(); // on recharge
  }, 1000 * 60 * 2); // toutes les 2 minutes

26/07/2018, 11h16
CrasherSEP

Bonjour,

Le dernier code n'a rien changé, il fonctionne très bien sur PC ! Mais le problème semble venir des navigateurs des TV...

J'ai testé les deux codes sur plusieurs TV de marques différentes et voici mes observations...

LG et THOMSON
Les iFrames s'affichent mais le refresh est général, j'ai donc le sablier de l'écran qui s'affiche etc...

SAMSUNG (2 modèles différents) et SONY
Les iFrames (contenu.htm) ne sont pas affichés, donc je ne sais pas si le code pour le refresh est général ou pas ou même si il fonctionne, car aucune indication de changement (sablier...)...

Dommage... :(

Ps : si il existe une autre solution, je suis preneur, car je suis frustré de ne pas pouvoir l'afficher correctement sur ma TV et voir que sur PC cela fonctionne nickel avec le code de jreaux62 à qui je dis encore merci d'avoir passé du temps pour moi... :calim2::weird:
26/07/2018, 18h28
Crachover

Effectivement, sur mes PC cela fonctionne sans problème, mais sur mon écran de marque SAMSUNG, je n'ai pas les pages 'contenu....' non plus :(

Comme je ne m'y connais pas vraiment en Java, cela est peut-être dû à la version du navigateur des TV, comme par exemple compatible HTML5 ou pas...

Le code Java est-il différent pour l'HTML4 et le 5 ? Comme par exemple, la déclaration des variables, je pense à ça, car j'ai eu le problème en VBA Access...

:mouarf:
26/07/2018, 18h49
Invité
Bonjour,

1- Ce n'est pas du Java, mais du JavaScript.

2- let n'est peut-être pas correctement utilisé/compris.

Essaie en remplaçant par : var.
- let
- var
Citation:

Le mot-clé let permet de définir des variables au sein d'un bloc et des blocs qu'il contient.
var permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.

CA FONCTIONNE avec var :P:P:D;)
Merci

Pour info:

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
<!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=iso-8859-1">
<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 URLs = [
    "viewscorestv.htm",
    "viewscorestv2.htm",
    "viewscorestv3.htm",
    "viewscorestv4.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 * 10); // toutes les 3 s (EN TEST !)
};
</script>
</head>
<body>
	<div id="bandeau"> <iframe id="Example1" name="Example1" title="Example1"src="menu.htm" frameborder=0  height=58px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe>
	</div>
<div id="contenu"> <iframe id="Example2" name="Example2" title="Example2" frameborder=0  height=555px width=100% scrolling="No" marginheight="2" marginwidth="105"></iframe></div>
</body>
</html>