Cause Anomalie HTML1512 non trouvée

**jpe54** · 31/12/2013, 13h59

Bonjour,

J’ai un gros problème de débogage.

Je génère un menu depuis une liste présente dans un fichier externe menuW3C.js pour une actualisation facilitée.

Je joins l’intégralité des fichiers en annexe zip (css, js et html), mais le problème se trouve certainement dans le fichier html - menuW3C.htm - que voici :

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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- saved from url=(0013)about:internet -->
 
<title>Version 1.00 12-2013</title>
 
<script src="Script/menuW3C.js" type="text/javascript"></script> 
 
<link rel="stylesheet" type="text/css" href="css/index_styles.css" />
 
<script type="text/javascript">
 
// ========================================================================
// Récupération des menus voulus selon liste des présente dans menuW3C.js
// ========================================================================
function FabriquerMenu() {
 
// Préparer tableau pour stockage des Menus
tabMenu = new Array();
 
var i = 0;
var j = 0;
 
	for (i=0; i < tabMenuSave.length; i++) {			
 
		// Détecter informations de ligne vide LI dans le menu
		if (tabMenuSave[i].substr(0,2) == "LI") {
		tabMenu[j] = "LI";
			// incrémenter TabMenu pour le suivant		
			if (i < tabMenuSave.length) {
			i++
			}
		j++
		}		
 
	// Récupérer Répertoire Root pour le menu à afficher
	tabMenu[j] = tabMenuSave[i].substring(0, tabMenuSave[i].indexOf("/",1));
	// incrémenter tabMenu pour le suivant
	j++
 
	}
}
 
 
// ========================================================================
// Déterminer si colonne gauche ou droite pour le Menu
// ========================================================================
function pair(chiffre) {
	chiffre=parseInt(chiffre);
	return ((chiffre & 1)=='0')?true:false;
}
 
// ========================================================================
// Afficher menu dans la page Web
// ========================================================================
function AfficherMenu() {
nb_Lien = tabMenu.length;
 
var URL = "";
var pos = 0;
var posUrl = 0;
 
document.write('<table id="TableMenu"><tr>');
 
	for(var i=0; i<nb_Lien; i++) {
	// on extrait la chaine
	str = tabMenu[i]; 
	// nombre de séparateurs
	nsep = 1 
		for (var j = 0; j < nsep ; j++){ 
		pos = str.indexOf(";"); 
		str=str.substring(pos+1,str.length); 
		}
 
		// Si ligne vierge
		if (str.substr(0,2) == "LI") { 
		str = "-"; 
		}
 
		// Mise en forme de la colonne Date
		Date = str.substr(0,4) + " " + str.substr(5,2);
			if (Date == "- ") {
			document.write('<td id="LiCol1"><b>' + "*" + '</b></td>'); 
			}
			else {
			document.write('<td id="Col1"><b>' + Date + '</b></td>');
			}
 
		// Encodage des espaces pour les liens Url
		posUrl = tabMenuSave[i].indexOf("/",1)
		URL = tabMenuSave[i].substring(posUrl, tabMenuSave[i].length) + "W3C/index.htm";
 
 
		if (Date != "- ") {
		document.write('<td id="Col2"><a href="' + URL +'"><b>' + str.substr(11,str.length) + '</b></a></td>');
		}
		else {
		document.write('<td id="LiCol2"></a></td>')
		}
 
		// Fin de ligne du tableau
		if (pair(i) == false) {
		document.write('</tr><tr>');
		}
	}
 
	// Completer partie Droite du tableau si nombre de menu impair
	if (pair(i) == false) {
	document.write('<td id="Col1"></td>');
	document.write('<td id="Col2"></td>');
	}
 
document.write('</tr></table>');
 
}
 
</script>
 
</head>
<body>
 
<script type="text/javascript">
 
// Entete Feuille HTML
document.write('<table id="TableHaut"><tr>');
document.write('<td id="TitreLeft"><a href="javascript:window.close();"><b>Quitter</b></a></td>');
document.write('<td id="TitreCenter">Album Photos Numériques Full HD</td>');
document.write('<td id="TitreRight"><b>© JpE 11/2013</b></td>');
document.write('</tr></table>');
 
document.write('<hr><br>');
 
// Charger Liste Menu de menuW3C.js
tabMenuSave = new Array();
ListeMenu();
 
// Générer le menu
FabriquerMenu();
 
// Afficher ce menu
AfficherMenu();
 
document.write('<br><hr>');
document.write('<div><img src="img_gif/gamme_gris.gif"></div>');
document.write('<hr><br>');
 
// ========================================================================
// Permettre un fonctionnement au clavier avec IE et autres
// ========================================================================
document.onkeyup = function touches(event) {
	if ( typeof event == "undefined" ) {
		event = window.event;
		kc = event.keyCode;
	} else {
		kc = event.which;
	}
// Instruction debogage pour afficher les codes keyCode...
// alert(kc) 
// Si Touche "Echap" ou "Q" ou "S" => Sommaire
if (kc == 27 || kc == 81 || kc == 83) {document.location.href="javascript:window.close();";}
}
 
</script>
 
</body>
</html>

La liste menuW3C.js

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 ListeMenu() {
// ================================================================================
// Insérer ici les menus du diaporama
// ================================================================================
// ================================================================================
// Pour une sépration dans le menu mettre 2 fois
// tabMenuSave[0] = "LI         -/";
// ================================================================================
tabMenuSave[0] = "LI         -/";
tabMenuSave[1] = "LI         -/";
tabMenuSave[2] = "2013-S1-00 Photos du 1er semestre 2013/CD Divers S1-2013/";
tabMenuSave[3] = "2013-S2-00 Photos du 2eme semestre 2013/CD Divers S2-2013/";
tabMenuSave[4] = "LI         -/";
tabMenuSave[5] = "LI         -/";
tabMenuSave[6] = "2013-03-00 Vacances 03-2013/CD Vacances 2013-03/";
tabMenuSave[7] = "2013-05-00 Vacances 05-2013/CD Vacances 2013-05/";
tabMenuSave[8] = "2013-06-00 Vacances 06-2013/CD Vacances 2013-06/";
tabMenuSave[9] = "2013-08-00 Vacances 08-2013/CD Vacances 2013-08/";
tabMenuSave[10] = "2013-09-00 Vacances 09-2013/CD Vacances 2013-09/";
tabMenuSave[11] = "2013-10-00 Vacances 10-2013/CD Vacances 2013-10/";
tabMenuSave[12] = "LI         -/";
tabMenuSave[13] = "LI         -/";
// ================================================================================
}

Rien ne se produit sur un clic dans les liens href du menu dynamique qui pourtant me semblent correctement codés !

IE11 me signale une erreur HTML1512 > la balise de fin n’est pas concordante en ligne 166 colonne 7.

Or l’erreur m’envoie sur le p de la balise de fermeture du script de </script> et il ne semble pas y avoir de balise orpheline dans le tableau…

Bref je tourne en rond depuis une semaine ou alors j’ai besoin d’une nouvelle paire de lunette !

Merci par avance d’un coup de main.

Amitiés à vous tous… et bonnes fêtes !

**SpaceFrog** · 31/12/2013, 14h11

Je n'ai pas approfondi, mais en voyant

document.write ...

http://blog.developpez.com/web/p1065..._en_javascript

**jpe54** · 31/12/2013, 15h19

Merci pour ce lien.

J’ai essayé de coder différemment en mettant tout le moteur javascript dans un fichier séparé menuCode.js que voici

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// Charger Liste Menu de menuW3C.js
tabMenuSave = new Array();
ListeMenu();
 
// ========================================================================
// Récupération des menus voulus selon liste des présente dans menuW3C.js
// ========================================================================
function FabriquerMenu() {
 
// Préparer tableau pour stockage des Menus
tabMenu = new Array();
 
var i = 0;
var j = 0;
 
	for (i=0; i < tabMenuSave.length; i++) {			
 
		// Détecter informations de ligne vide LI dans le menu
		if (tabMenuSave[i].substr(0,2) == "LI") {
		tabMenu[j] = "LI";
			// incrémenter TabMenu pour le suivant		
			if (i < tabMenuSave.length) {
			i++
			}
		j++
		}		
 
	// Récupérer Répertoire Root pour le menu à afficher
	tabMenu[j] = tabMenuSave[i].substring(0, tabMenuSave[i].indexOf("/",1));
	// incrémenter tabMenu pour le suivant
	j++
 
	}
}
 
 
// ========================================================================
// Déterminer si colonne gauche ou droite pour le Menu
// ========================================================================
function pair(chiffre) {
	chiffre=parseInt(chiffre);
	return ((chiffre & 1)=='0')?true:false;
}
 
// ========================================================================
// Afficher menu dans la page Web
// ========================================================================
function AfficherMenu() {
nb_Lien = tabMenu.length;
 
var URL = "";
var pos = 0;
var posUrl = 0;
 
document.write('<table id="TableMenu"><tr>');
 
	for(var i=0; i<nb_Lien; i++) {
	// on extrait la chaine
	str = tabMenu[i]; 
	// nombre de séparateurs
	nsep = 1 
		for (var j = 0; j < nsep ; j++){ 
		pos = str.indexOf(";"); 
		str=str.substring(pos+1,str.length); 
		}
 
		// Si ligne vierge
		if (str.substr(0,2) == "LI") { 
		str = "-"; 
		}
 
		// Mise en forme de la colonne Date
		Date = str.substr(0,4) + " " + str.substr(5,2);
			if (Date == "- ") {
			document.write('<td id="LiCol1"><b>' + "1" + '</b></td>'); 
			}
			else {
			document.write('<td id="Col1"><b>' + Date + '</b></td>');
			}
 
		// Encodage des espaces pour les liens Url
		posUrl = tabMenuSave[i].indexOf("/",1)
		URL = tabMenuSave[i].substring(posUrl, tabMenuSave[i].length) + "W3C/index.htm";
 
 
		if (Date != "- ") {
		document.write('<td id="Col2"><a href="' + URL +'"><b>' + str.substr(11,str.length) + '</b></a></td>');
		}
		else {
		document.write('<td id="LiCol2"></a></td>')
		}
 
		// Fin de ligne du tableau
		if (pair(i) == false) {
		document.write('</tr><tr>');
		}
	}
 
	// Completer partie Droite du tableau si nombre de menu impair
	if (pair(i) == false) {
	document.write('<td id="Col1"></td>');
	document.write('<td id="Col2"></td>');
	}
 
document.write('</tr></table>');
 
}

Le fichier html est épuré des write inutiles et utilise la funtion() proposée par bovino dans votre lien. Le voici

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
<!DOCTYPE html>
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- saved from url=(0013)about:internet -->
 
<title>Version 1.00 12-2013</title>
 
<script src="Script/menuW3C.js" type="text/javascript"></script> 
 
<link rel="stylesheet" type="text/css" href="css/index_styles.css" />
 
<script type="text/javascript">
 
(function(){
 var sc = document.createElement(‘script’); 
sc.type = ‘text/javascript’; 
sc.src = ‘Script/menuCode.js’; 
document.getElementsByTagName(‘script’)[0].insertBefore(sc); 
 })();
 
</script>
 
</head>
<body>
 
<table id="TableHaut"><tr>
<td id="TitreLeft"><a href="javascript:window.close();"><b>Quitter</b></a></td>
<td id="TitreCenter">Album Photos Numériques Full HD</td>
<td id="TitreRight"><b>© JpE 11/2013</b></td>
</tr></table>
 
<hr><br>
 
<script type="text/javascript">
 
// Générer le menu
FabriquerMenu();
 
// Afficher ce menu
AfficherMenu();
 
// ========================================================================
// Permettre un fonctionnement au clavier avec IE et autres
// ========================================================================
document.onkeyup = function touches(event) {
	if ( typeof event == "undefined" ) {
		event = window.event;
		kc = event.keyCode;
	} else {
		kc = event.which;
	}
// Instruction deboguage pour afficher les codes keyCode...
// alert(kc) 
// Si Touche "Echap" ou "Q" ou "S" => Sommaire
if (kc == 27 || kc == 81 || kc == 83) {document.location.href="javascript:window.close();";}
}
 
</script>
 
<br><hr>
<div><img src="img_gif/gamme_gris.gif"></div>
<hr><br>
 
 
</body>
</html>

Pourtant le problème reste entier alors qu’il ne reste que 9 document.write dans le seul fichier js… et que le contenu des variables ne semblent pas en cause même en supprimant des espaces.

Existe-t’il une instruction pouvant remplacer ce fameux document.write ?

EDIT : ajouter escape en Ligne 83 de menuCode.js ne change rien

Code :

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

URL = escape(tabMenuSave[i].substring(posUrl, tabMenuSave[i].length)) + "W3C/index.htm";

**NoSmoking** · 31/12/2013, 16h48

Bonjour,

Existe-t’il une instruction pouvant remplacer ce fameux document.write ?

tu peux passer par tu templating, c'est en vogue et cela fonctionne bien, un peu de lecture
- Petit guide du templating client
- Mustache.js et ICanHaz.js au secours de jQuery

Tu peux utiliser les méthodes traditionnelles, createElement, appendChild

**danielhagnoul** · 31/12/2013, 19h12

Envoyé par jpe54

IE11 me signale une erreur HTML1512 > la balise de fin n’est pas concordante en ligne 166 colonne 7.

Je n'ai pas IE11 mais il est possible qu'il soit toujours aussi imprécis que ses prédécesseurs obsolètes dans le signalement des erreurs, il manque un ";" à la ligne 164

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
document.onkeyup = function touches(event) {
	if ( typeof event == "undefined" ) {
		event = window.event;
		kc = event.keyCode;
	} else {
		kc = event.which;
	}
// Instruction debogage pour afficher les codes keyCode...
// alert(kc) 
// Si Touche "Echap" ou "Q" ou "S" => Sommaire
if (kc == 27 || kc == 81 || kc == 83) {document.location.href="javascript:window.close();";}
};

**NoSmoking** · 02/01/2014, 09h26

Je doute que la seule absence du ; soit à l'origine de l'erreur, sinon bon nombre de site ne doivent pas fonctionner sur IE11

On pourra noter en regardant le code généré par le script que
- les ID ne sont pas unique, il serait préférable de passer par des class.
- le code n'est pas valide

Peut être que IE11 refuse d'intégrer du code mal conçu et cela on ne peut pas lui reprocher.

**jpe54** · 02/01/2014, 13h50

Bonjour,

Merci beaucoup de l’intérêt que vous portez à cette problématique.

Je confirme effectivement que ce n’est pas l’absence de ; en ligne 164 qui génère le message d’erreur HTML1512 mais due à la ligne 101 fausse ou la balise de fermeture </a> n’a aucune raison d’être!

Code :

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

 document.write('<td></a></td>')

Corrigé donc comme suit :

Code :

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

 document.write('<td></td>')

Par contre la variable URL continue de poser problème et me laisse perplexe.
Sous IE les liens ne fonctionnent pas ! Par contre sous FireFox et Chrome les liens fonctionnent à tout coup !

Avant d’utiliser class j’ai supprimé les Id=xxx de la table id="TableMenu" sans résultat..

Juste une question sur quoi vous basez-vous pour dire que le code n'est pas valide... sur les seuls document.write ou sur la codage javascript du tableau ?

Merci par avance.

**NoSmoking** · 02/01/2014, 17h22

Par contre la variable URL continue de poser problème et me laisse perplexe.

il y a des espaces dans les URL, il est donc préférable de les "escaper" dans ta fonction AfficherMenu()

Code :

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

document.write('<td id="Col2"><a href="' + escape(URL) +'"><b>' + str.substr(11,str.length) + '</b></a></td>');

Juste une question sur quoi vous basez-vous pour dire que le code n'est pas valide...

il n'est qu'à regarder le code qui est en sortie, il donne cela

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
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
<table id="TableHaut">
    <tr>
        <td id="TitreLeft">
            <a href="javascript:window.close();"><b>Quitter</b></a>
        </td>
        <td id="TitreCenter">
            Album Photos Numériques Full HD
        </td>
        <td id="TitreRight">
            <b>© JpE 11/2013</b>
        </td>
    </tr>
</table>
<hr>
<br>
<table id="TableMenu" border>
    <tr>
        <td id="LiCol1">
            <b>*</b>
        </td>
        <td id="LiCol2">
            </a>
        </td>
        <td id="LiCol1">
            <b>*</b>
        </td>
        <td id="LiCol2">
            </a>
        </td>
    </tr>
    <tr>
        <td id="Col1">
            <b>2013 S1</b>
        </td>
        <td id="Col2">
            <a href="/CD Divers S1-2013/W3C/index.htm"><b>Photos du 1er semestre 2013</b></a>
        </td>
        <td id="Col1">
            <b>2013 S2</b>
        </td>
        <td id="Col2">
            <a href="/CD Divers S2-2013/W3C/index.htm"><b>Photos du 2eme semestre 2013</b></a>
        </td>
    </tr>
    <tr>
        <td id="LiCol1">
            <b>*</b>
        </td>
        <td id="LiCol2">
            </a>
        </td>
        <td id="LiCol1">
            <b>*</b>
        </td>
        <td id="LiCol2">
            </a>
        </td>
    </tr>
    <tr>
        <td id="Col1">
            <b>2013 03</b>
        </td>
        <td id="Col2">
            <a href="/CD Vacances 2013-03/W3C/index.htm"><b>Vacances 03-2013</b></a>
        </td>
        <td id="Col1">
            <b>2013 05</b>
        </td>
        <td id="Col2">
            <a href="/CD Vacances 2013-05/W3C/index.htm"><b>Vacances 05-2013</b></a>
        </td>
    </tr>
    <tr>
        <td id="Col1">
            <b>2013 06</b>
        </td>
        <td id="Col2">
            <a href="/CD Vacances 2013-06/W3C/index.htm"><b>Vacances 06-2013</b></a>
        </td>
        <td id="Col1">
            <b>2013 08</b>
        </td>
        <td id="Col2">
            <a href="/CD Vacances 2013-08/W3C/index.htm"><b>Vacances 08-2013</b></a>
        </td>
    </tr>
    <tr>
        <td id="Col1">
            <b>2013 09</b>
        </td>
        <td id="Col2">
            <a href="/CD Vacances 2013-09/W3C/index.htm"><b>Vacances 09-2013</b></a>
        </td>
        <td id="Col1">
            <b>2013 10</b>
        </td>
        <td id="Col2">
            <a href="/CD Vacances 2013-10/W3C/index.htm"><b>Vacances 10-2013</b></a>
        </td>
    </tr>
    <tr>
        <td id="LiCol1">
            <b>*</b>
        </td>
        <td id="LiCol2">
            </a>
        </td>
        <td id="LiCol1">
            <b>*</b>
        </td>
        <td id="LiCol2">
            </a>
        </td>
    </tr>
    <tr>
    </tr>
</table>
<br>
<hr>
<div>
    <img src="img_gif/gamme_gris.gif">
</div>
<hr>
<br>

et il ne passe pas la validation.

**danielhagnoul** · 02/01/2014, 19h02

Je n'ai pas IE11 mais il est possible qu'il soit toujours aussi imprécis que ses prédécesseurs obsolètes dans le signalement des erreurs, ...

Je confirme effectivement que ce n’est pas l’absence de ; en ligne 164 qui génère le message d’erreur HTML1512 mais due à la ligne 101 fausse ou la balise de fermeture </a> n’a aucune raison d’être!

La première partie de ma phrase est donc valable.

**jpe54** · 03/01/2014, 09h59

1000 Mercis NoSmoking pour cette mise en exergue du code généré par le javascript !

La balise </a> orpheline avait été corrigée y compris l'ajout de escape dans url... sans poster le code source actualisé (utilisant class au lieu de id) que voici : (sans le css corrigé .Nomclass au lieu de #Id)

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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- saved from url=(0013)about:internet -->
 
<title>Version 1.01 12-2013</title>
 
<script src="Script/menuW3C.js" type="text/javascript"></script> 
 
<link rel="stylesheet" type="text/css" href="css/index_styles_class.css" />
 
<script type="text/javascript">
 
// ========================================================================
// Récupération des menus voulus selon liste des présente dans menuW3C.js
// ========================================================================
function FabriquerMenu() {
 
// Préparer tableau pour stockage des Menus
tabMenu = new Array();
 
var i = 0;
var j = 0;
 
	for (i=0; i < tabMenuSave.length; i++) {			
 
		// Détecter informations de ligne vide LI dans le menu
		if (tabMenuSave[i].substr(0,2) == "LI") {
		tabMenu[j] = "LI";
			// incrémenter TabMenu pour le suivant		
			if (i < tabMenuSave.length) {
			i++
			}
		j++
		}		
 
	// Récupérer Répertoire Root pour le menu à afficher
	tabMenu[j] = tabMenuSave[i].substring(0, tabMenuSave[i].indexOf("/",1));
	// incrémenter tabMenu pour le suivant
	j++
 
	}
}
 
 
// ========================================================================
// Déterminer si colonne gauche ou droite pour le Menu
// ========================================================================
function pair(chiffre) {
	chiffre=parseInt(chiffre);
	return ((chiffre & 1)=='0')?true:false;
}
 
// ========================================================================
// Afficher menu dans la page Web
// ========================================================================
function AfficherMenu() {
nb_Lien = tabMenu.length;
 
var URL = "";
var pos = 0;
var posUrl = 0;
 
document.write('<table id="TableMenu"><tr>');
 
	for(var i=0; i<nb_Lien; i++) {
	// on extrait la chaine
	str = tabMenu[i]; 
	// nombre de séparateurs
	nsep = 1 
		for (var j = 0; j < nsep ; j++){ 
		pos = str.indexOf(";"); 
		str=str.substring(pos+1,str.length); 
		}
 
		// Si ligne vierge
		if (str.substr(0,2) == "LI") { 
		str = "-"; 
		}
 
		// Mise en forme de la colonne Date
		Date = str.substr(0,4) + " " + str.substr(5,2);
			if (Date == "- ") {
			document.write('<td class="LiCol1"><b>' + "LI" + '</b></td>'); 
			}
			else {
			document.write('<td class="Col1"><b>' + Date + '</b></td>');
			}
 
		// Encodage des espaces pour les liens Url
		posUrl = tabMenuSave[i].indexOf("/",1) + 1;
		URL = escape(tabMenuSave[i].substring(posUrl, tabMenuSave[i].length) + "W3C/index.htm");
		// URL = "index.htm"
 
		if (Date != "- ") {
		document.write('<td class="Col2"><a href="' + URL +'"><b>' + str.substr(11,str.length) + '</b></a></td>');
		}
		else {
		document.write('<td class="LiCol2"><b>' + "LI" + '</b></td>')
		}
 
		// Fin de ligne du tableau
		if (pair(i) == false) {
		document.write('</tr><tr>');
		}
	}
 
	// Completer partie Droite du tableau si nombre de menu impair
	if (pair(i) == false) {
	document.write('<td class="Col1"></td>');
	document.write('<td class="Col2"></td>');
	}
 
document.write('</tr></table>');
 
}
 
</script>
 
</head>
<body>
 
<script type="text/javascript">
 
// Entete Feuille HTML
document.write('<table id="TableHaut"><tr>');
document.write('<td id="TitreLeft"><a href="javascript:window.close();"><b>Quitter</b></a></td>');
document.write('<td id="TitreCenter">Album Photos Numériques Full HD</td>');
document.write('<td id="TitreRight"><b>© JpE 11/2013</b></td>');
document.write('</tr></table>');
 
document.write('<hr><br>');
 
// Charger Liste Menu de menuW3C.js
tabMenuSave = new Array();
ListeMenu();
 
// Générer le menu
FabriquerMenu();
 
// Afficher ce menu
AfficherMenu();
 
document.write('<br><hr>');
document.write('<div><img src="img_gif/gamme_gris.gif"></div>');
document.write('<hr><br>');
 
// ========================================================================
// Permettre un fonctionnement au clavier avec IE et autres
// ========================================================================
document.onkeyup = function touches(event) {
	if ( typeof event == "undefined" ) {
		event = window.event;
		kc = event.keyCode;
	} else {
		kc = event.which;
	}
// Instruction deboguage pour afficher les codes keyCode...
// alert(kc) 
// Si Touche "Echap" ou "Q" ou "S" => Sommaire
if (kc == 27 || kc == 81 || kc == 83) {document.location.href="javascript:window.close();";}
}
 
</script>
 
</body>
</html>

Je suppose que votre code est issu d'un console.log() ou console.write() alors que j'utilise l'explorateur DOM de IE peu convivial... voire temporairement des alert()

Pour ma propre "Actualisation de ma formation" existe-t-il une fonctionnalité ou astuce pour extraire dans un fichier l'intégralité du code en HTML, - y compris celui généré par le javascript - , ou un programme plus convivial ?

Sur ce coup Google n'est pas mon ami !

**SylvainPV** · 03/01/2014, 10h28

Je ne suis pas sûr que ce soit ce que vous cherchiez, mais pour obtenir le code source HTML "généré" d'une page, il suffit de cliquer droit sur la page dans votre navigateur puis "Afficher la source".

Pour le code généré par JavaScript, il faut récupérer le HTML à un instant T (après exécution du JavaScript). Il faut donc passer par un inspecteur de développement. Toutefois, je ne recommanderai pas celui d'Internet Explorer, quoique celui de la version 11 s'est nettement amélioré. Sur Internet Explorer 11 et la page de votre site totalement chargée, appuyez sur F12 pour ouvrir l'inspecteur de développement. Puis dans l'onglet HTML, vous voyez l'intégralité du HTML à l'état actuel de votre page. Faites ensuite un clic droit sur le tag <html> puis "Copier OuterHTML" pour copier/coller tout le contenu HTML de la page au format texte.

**jpe54** · 03/01/2014, 10h39

Merci de cette information... mais, sauf incompréhension de la manip que vous citez, en mode débogage de IE11 (F12) seul l'explorateur DOM me donne le code HTML issu du javascript mais sans pouvoir le copier en l'état...

Un copier coller me redonne le code original HTML + javascript...

**NoSmoking** · 03/01/2014, 11h11

Dans un cas comme le tiens je ne regarde pas la source affichée/générée par le navigateur car il corrige pas mal d'anomalie du code qui leur est donné, ajout des TBODY, THEAD, TFOOT et autre fermeture de balise ou déplacement d'élément mal encapsulé.

Une méthode à "l'ancienne", et qui a fait ses preuves, consiste à démarrer ton script par une redéfinition de la méthode document.write.

Code :

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

1
2
3
4
var html = [];
document.write = function(txt){
  html.push(txt);
}

en fin de script il suffit de récupérer le tout via un simple

Code :

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

console.log( html.join('\n'));

c'est ce code que l'on donne à manger au navigateur, à lui de se débrouiller avec, si le code est bon il n'aura pas d’indigestion

.

Ensuite si l'on est un peu fainéant on peut le passer au validateur ou tout simplement le lire pour voir ce qui cloche.

**jpe54** · 03/01/2014, 13h49

Votre méthodologie à l'ancienne correspond totalement à mes attentes en me donnant une véritable visibilité et lisibilité sur l'interprétation faite du codage javascript ! Outre le visuel, la détection d'erreur résiduelle via le valideur W3C devient possible...

Cette routine mérite de figurer dans une FAQ de ce site (à moins que je n'ai pas su la dénicher)... L'information appartenant à celui qui la donne je vous laisse arbitrer.

Vraiment un vif merci pour ce bout de code beaucoup plus pratique que l'explorateur DOM ou autres outils de débogage intégrés aux navigateurs moderne.

Je considère ce sujet comme clos car ne concerne plus la fameuse erreur HTML qui a mis en exergue d'autres problèmes plus ... "bloquant"

Excellente année 2014 à tous ! ... et encore Merci

Cause Anomalie HTML1512 non trouvée

JavaScript

Discussions similaires

Partager

Partager