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

**CrasherSEP** · 23/07/2018, 14h14

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

Invité · 23/07/2018, 15h14

Bonjour,

montre le code actuel.

**Crachover** · 23/07/2018, 23h04

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 :

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

**CrasherSEP** · 25/07/2018, 11h53

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

Invité · 25/07/2018, 12h37

Bonjour,

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"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.........

**CrasherSEP** · 25/07/2018, 13h46

Bonjour,

Merci pour votre réponse

mais je n'y arrive pas...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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"...

Invité · 25/07/2018, 13h53

Code html :

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

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

**CrasherSEP** · 25/07/2018, 14h42

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>

Invité · 25/07/2018, 15h14

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

Avec ça, on est bien avancé.

**CrasherSEP** · 25/07/2018, 15h24

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

Invité · 25/07/2018, 15h33

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

Alors essaie :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"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 !)
};

**CrasherSEP** · 25/07/2018, 15h48

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 :

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

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

Cette ligne semble vouloir faire cela, mais sur mon écran , j'ai un refresh total...

Code :

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

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

Invité · 25/07/2018, 16h45

???

C'est ce que fait mon code, non ?

Ou alors je n'ai pas compris.

**CrasherSEP** · 25/07/2018, 16h50

Oui, cela devrait ce faire grâce à la ligne

Code :

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

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

Mais sur mon écran TV, non...

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

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

Invité · 25/07/2018, 17h04

Teste avec :

Code javascript :

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

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

**CrasherSEP** · 26/07/2018, 11h16

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

**Crachover** · 26/07/2018, 18h28

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

Invité · 26/07/2018, 18h49

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.

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.

**Crachover** · 26/07/2018, 20h05

CA FONCTIONNE avec var

Merci

Pour info:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>

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

JavaScript

Discussions similaires

Partager

Partager