Insertion et activation de liens

**r1oll** · 22/01/2013, 11h46

Bonjour,

je travaille actuellement sur un script qui me permet de lire un fichier XML (écrit en dur au préalable) qui a cette forme :

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<racine>
	<pages>
		<page1>
			<nom>aaa</nom>
			<lien>http://monlien1</lien>
			<seconde>1000</seconde>			
		</page1>		
		<page2>
			<nom>bbb</nom>
			<lien>http://monlien2</lien>
			<seconde>20000</seconde>		   
		</page2>
             </pages>
        </racine>

Allant de <page1> a <page6> dans ce fichier.

J'ai une fonction qui me permet de charger le XML suivit de variable de stockage d'information:

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
function loadXMLDoc(dname)
{
         if (window.XMLHttpRequest) {
								  xhttp=new XMLHttpRequest();
								                                   }
									else                             {
						             xhttp=new ActiveXObject("Microsoft.XMLHTTP");
											          }
 
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
} 				
 
// charge le xml et le met dans xmlDoc
xmlDoc=loadXMLDoc("fichierconf.xml");
 
//stock pages dans lespages
var lespages = xmlDoc.getElementsByTagName("pages");
 
//compte le nombre de noeud ( JE RETIRE 7 SOUS FIREFOX POUR AVOIR MES 6 NOEUDS QUI CORRESPONDENT A MES 6PAGES)
var nombre = ((lespages[0].childNodes.length)-7);

Premier Probleme:
Il me semble que le DOM ne compte pas comme je voudrais mes noeuds

je dois retirer "7" au résultat pour avoir la bonne valeur.

J'ai une deuxieme fonction qui boucle sur le XML et envoi les informations receuillit à une autre fonction qui me permettra d'afficher les contenus des <liens>:

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
function load()
{
 
	// boucle et récupere les informations de chaques pages 		
		for (i=0; i<nombre; i++)
 
			{
 
					var nom=lespages[0].getElementsByTagName("nom")[i].firstChild.nodeValue;
					var seconde=lespages[0].getElementsByTagName("seconde")[i].firstChild.nodeValue;
					var lien=lespages[0].getElementsByTagName("lien")[i].firstChild.nodeValue;
 
 
 
 
 
					affichage(seconde,lien);
 
			} 
 
		load();
 
 
}

Voici la fonction qui devrais me permettre d'afficher les liens:

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
function affichage(seconde,lien) {
 
 
 
	var delai = seconde;
	var url_de_redirection = lien ;
 
 
 
	//insert le lien dans le Div conteneur
	document.getElementById("conteneur").innerHTML=lien;
 
 
 
 
 
}

Mon but est d'afficher une pages web réferente a la balises <lien> dans ma <div id="conteneur"> pendant X <seconde> puis de passer a la suivante. Et ceci en boucle infinis (toute la journée afficher les pages en boucles suivant les <seconde> parametrer dans le XML sur une page HTML.

Mon problème est que j'arrive à afficher le liens dans ma div, mais pas à "l'executer" / "simuler un click" / "afficher son contenu" (suivant la manière de tourner la phrase dans notre esprit

).

Je me retrouve donc avec une div contenant: http//:monlien1 au lieu d'avoir une div contenant le CONTENU de http//:monlien1.

Merci pour le temps et l'aide que vous m'apporterez.

Cordialement

**r1oll** · 23/01/2013, 08h29

Mon problème est il compréhensible ?

J'ai essayer de faire une redirection avec un timer(défini par <seconde>)

Code :

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

1
2
3
4
5
6
7
8
 
function affichage(seconde,lien) 
{
 
	var delai = seconde;
	var url_de_redirection = lien ;	
	setTimeout("self.location.href = url_de_redirection;",delai) ;
}

Je n'ai pas réussit a faire marcher cette fonction comme je le voulais.
J'ai donc enlever le setTimeout pour faire une redirection classique:

Code :

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

1
2
3
4
5
6
7
8
9
10
function affichage(seconde,lien) 
{
 
	var delai = seconde;
	var url_de_redirection = lien ;		
 
	//redirige sur le lien
	redirection=(top.location.href=lien);
 
}

Sa fonctionne, mais le problème c'est qu'une fois la premiere redirection executé...ba on change de page et donc on arrete le sript, pas de boucle donc..

**r1oll** · 24/01/2013, 09h11

J'ai revu mon aglorithme de base est n'execute pas les boucles de la meme facon.

L'algo' me semble juste ce coup ci mais je n'arrive pas a faire marcher le setTimeout la syntaxe me semble bonne pourtant:

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
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
<script type="text/javascript">
 
 
function loadXMLDoc(dname)
{
	if (window.XMLHttpRequest)
	{
		xhttp=new XMLHttpRequest();
	}
	else
	{
		xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
 
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
 
} 
 
 
 
// charge le xml et le met dans xmlDoc
xmlDoc=loadXMLDoc("fichierconf.xml");
 
//stock pages dans lespages
var lespages = xmlDoc.getElementsByTagName("pages");
 
//compte le nombre de noeud et enleve 7 pour avoir 6 pages
var nombre = ((lespages[0].childNodes.length)-7); 
 
 
// varriable pour le setTimeout
var x  = null;
 
 
 
 
function load()
{
    clearTimeout(x); 
 
	// boucle et récupere les informations de chaques pages 		
		for (i=0; i<nombre; i++)
 
			{
 
 
 
					var nom=lespages[0].getElementsByTagName("nom")[i].firstChild.nodeValue;
					var seconde=lespages[0].getElementsByTagName("seconde")[i].firstChild.nodeValue;
					var lien=lespages[0].getElementsByTagName("lien")[i].firstChild.nodeValue;			
 
 
 
					affichage(seconde,lien);
 
			} 
 
 
 
}
 
 
 
 
 
 
function affichage(seconde,lien) 
{
 
	var delai = seconde;
	var url_de_redirection = lien ;	
 
 
	//insert le lien dans le Div conteneur
	document.getElementById("conteneur").innerHTML=lien;	
 
	//execute load lorsque le delai est depasser ( seconde du XML)
	x = setTimeout(load, delai); 
 
}
 
 
</script>
 
<div id="conteneur">
 
</div>

**Kaamo** · 24/01/2013, 11h41

Pourquoi retirer 7 ? Normalement ton code est censé retourner le nombre de noeuds fils de <pages>. Donc s'il y a 6 fois <page>, c'est censé retourner 6.

Pourquoi redéfinir ces variables ?

Code javascript :

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

1
2
var delai = seconde;
var url_de_redirection = lien ;

Surtout que tu ne te sers pas de url_de_redirection. Utilise directement les variables passées à la fonction

Et fais directement setTimeout(load, seconde);
D'ailleurs il s'agit de millisecondes, n'est-ce pas ? Pas de seconde, histoire d'être pointilleux sur le nom des variables / balises.

Je peine à comprendre ton code .... comme il est fait là, ça va tourner en boucle un sacré bout de temps en n'affichant que le premier lien. En effet, toutes les X secondes (X étant le nombre de secondes du premier élément page); ça va écraser ton conteneur

**Bovino** · 24/01/2013, 11h51

Pourquoi retirer 7 ?

Parce que childNodes renvoie tous les noeuds, pas uniquement les éléments et comme les retours chariots sont considérés dans le DOM comme des noeuds texte, il faut les retirer.

Ce qui revient à dire que childNodes n'est pas la bonne propriété à utiliser, on préfèrera children qui renvoie uniquement les noeuds de type Element.

**r1oll** · 24/01/2013, 12h45

@ Bovino: J'ai donc remplacer [childNodes] par [Children] deja sa marche mieux, merci

@ Kaamo: J'avais redefinis mes variables pour une autre versions de mon code, et pensant que sa ne genais en rien, j'ai laisser comme sa. Mais si tu pense que sa peux envenimer la chose, je changerais pas.
Concernant l'algo', je pensais que sa ferais un truc du genre:

Chargement de toutes les variables
Chargement de la page et de la fonction Load
Je boucle dans load avec mon for pour récuperer les valeurs de mon XML
J'apelle ma fonction pour afficher au fur et a mesure les pages grace aux valeurs que j'optiens. (Page 1 s'affiche... pendan X millisecondes)
Je retourne dans la boucle de Load
(Page 2 s'affiche... pendan X millisecondes)

Ect...

Mais lorsque je met des alerts dans mon code, je peux bien passer d'une page a une autre, en revanche si je met pas d'alerte, la fonction [setTimeout] ne semble pas fonctioner. (Peut etre le problème de bouclage sur le liens 1 que tu évoque).

Tu aurais fais comment toi ?

**sekaijin** · 28/01/2013, 10h43

Envoyé par r1oll

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<racine>
	<pages>
		<page1>
			<nom>aaa</nom>
			<lien>http://monlien1</lien>
			<seconde>1000</seconde>			
		</page1>		
		<page2>
			<nom>bbb</nom>
			<lien>http://monlien2</lien>
			<seconde>20000</seconde>		   
		</page2>
             </pages>
        </racine>

Sur ce genre de XML tu as les élément suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
élément racine
textNode: "
	"
element pages
textNode: "
		"
element page1
textNode: "
			"
élément nom
textNode aaa
...

as tu tenu compte des textNodes dans l'analyse de ton DOM ?
A+JYT

**r1oll** · 28/01/2013, 11h10

Voici l'ensemble de mon code :

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
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
 <body onload="load();">
 
<script type="text/javascript">
 
 
 
function loadXMLDoc(dname)
{
	//pour moz ect..
	if (window.XMLHttpRequest)
	{
		//crée lobjet XMLHttprequest 
		xhttp=new XMLHttpRequest();
	}
 
	//pour IE
	else if(window.ActiveXObject)
	{
		xhttp=new ActiveXObject("Microsoft.XMLHTTP");		
	}
 
//on spécifie la méthode de transmission des données, l'URL et le mode de transmission de la requête (sync' ou async')
xhttp.open("GET",dname,false);
//on execute
xhttp.send();
return xhttp.responseXML;
 
} 
 
 
 
// charge le xml et le met dans xmlDoc
xmlDoc=loadXMLDoc("fichierconf.xml");
 
// stock pages dans lespages
var lespages = xmlDoc.getElementsByTagName("pages");
 
// compte le nombre de noeud 
var nombre = (lespages[0].children.length); 
 
// tableau  de 6 lignes (nombre)
var MonTab = new Array (); 
 
// compteur des affichages
var compteur = nombre-1;
 
 
 
 
 
function load()
{
 
	//On boucle et récupere les informations de chaques pages...	
		for (i=0; i<nombre; i++)
 
			{
 
 
					//...dans ces variables
					var nom=lespages[0].getElementsByTagName("nom")[i].firstChild.nodeValue;
					var seconde=lespages[0].getElementsByTagName("seconde")[i].firstChild.nodeValue;
					var lien=lespages[0].getElementsByTagName("lien")[i].firstChild.nodeValue;		
 
					//Initialisation du tableau pour stocker les valeurs du XML...
					var tabTemp=new Array(nom, seconde, lien); 				
 
					//Puis on remplit le tableau à chaques passages de la boucle
					MonTab[i]= tabTemp;					
 
 
 
 
			} 
 
	//On appelle la fonction pour afficher les pages
	affichage();
 
}
 
//Fonction qui affiche les pages à l'écran avec un timer 
 
function affichage()
{
 
 
   	//Remplace src"" du Iframe CONTENEUR par le lien récuperer par le XML
	document.getElementById('conteneur').src=(MonTab[compteur][2]);
 
	//On attribut un délai entre chaque switch de page selon (Seconde, du XML)
	setTimeout(affichage, MonTab[compteur][1]); 
 
    //On décremente
	compteur--;
 
	//Si compteur = -1 on réinitialise le compteur a 5;
	if(compteur == -1 ){
				compteur = nombre-1;   
					   }
 
}
 
 
</script>
 
 
<div class="fullscreen">
	<!-- Notre conteneur pour afficher les pages-->
	<iframe id='conteneur' iframe align="" width="100%" height="100%" frameborder="1" scrolling="auto" src="" name="iframe"></iframe>
 
</div>

@ sekaijin: Je ne comprends pas la question, désolé.

Mon problème est : Sous firefox ce code marche au poil ! Sous IE 8 il n'exécute que l'affichage du iframe vide, pour cause : il n'entre pas dans le

Code javascript :

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

1
2
3
4
else if(window.ActiveXObject)
{
	xhttp=new ActiveXObject("Microsoft.XMLHTTP");		
}

**Bovino** · 28/01/2013, 11h19

IE8 n'a pas à rentrer dans le else puisqu'il supporte nativement l'objet XMLHttpRequest...

**Kaamo** · 28/01/2013, 11h46

D'ailleurs en passant :
Il vaut mieux utiliser

Code javascript :

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

1
2
// Pour IE 6 et inférieur seulement !
xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');

Seulement IE 6 et inférieur utiliserons cela de toute façon.

En fait, il y a une sorte de bug de Microsoft (dans l'utilisation de XMLHttpRequest) qui empêche de lire les fichiers en local de la machine à partir de javascript car il croit qu'ils viennent d'un autre domaine. Il a été réparé dans Microsoft XML 3.0 Service Pack 1.

Source via le site de Microsoft : CORRECTIF: "accès refusé" Erreur du chargement du fichier XML local alors que la propriété ServerHTTPRequest est à True et voir § Security: Cross-Domain and Zone Policy

**r1oll** · 28/01/2013, 12h34

Donc le problème viens d'un bug Microsoft ?

Le contenu de mon else if, ne marche pas de toute facon, meme si je force son lancement.

J'ai essayer avec

Code :

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

= new ActiveXObject('MSXML2.XMLHTTP.3.0');

sa n'a pas l'air de marcher non plus.

Et j'avoue que niveau DOM, Régle de navigateur ect.. je suis vraiment pas dans le coup

Insertion et activation de liens

JavaScript

Vue hybride

Discussions similaires

Partager

Partager