Transformation XSLT inopérante avec Edge

**ulmeen** · 14/03/2016, 17h22

Bonjour
J'utilise des transformations XSLT qui fonctionne bien avec IE9, IE10 et IE11.
Mais avec l'arrivée de Edge, mes transformations ne donne plus le résultat escompté.
En fait, les balises ne semblent pas comprises.

Tous mes fichiers xsl commencent par:

Code :

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

1
2
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Avec F12\ Explorateur du DOM, tout semble pourtant normal.

Exemple pour un select.
Au lieu d'avoir une liste, avec toutes ses options verticalement, elles sont toutes listées horizontalement comme du texte, toutes collées et sans séparateyr( virgule ou autre).

Exemple pour un lien
Au lieu d'avoir un lien cliquable, je ne vois que le texte avec un semblant de style.

Exemple pour une image
Rien ne s'affiche.

Je n'ai pas vu grand chose à ce sujet sur le web.
Sinon qu'il y avait effectivement un bug. Mais je n'ai pas vu de moyen de correction ou de contournements.

Merci pour votre aide.

**thelvin** · 14/03/2016, 17h54

Hello,

on peut avoir un exemple minimaliste du fichier de donnée, du fichier de transformation, et de comment tu t'y prends pour voir une transformation à l'œuvre ?
(Autrement dit un exemple, quoi. Minimaliste. L'idée c'est de voir comment tu fais.)

**ulmeen** · 15/03/2016, 08h59

Voilà des précisions sur le codage effectué.

source PHP

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
 
		<table border="1" bgcolor="Black" cellpadding="10" cellspacing="2" width="90%">
			<tr>
				<td>
					<table>
						<tr>
							<td align="left">Bénéficiaire :</td>
							<td>
								<input name="ChoixDemandeur" id="idChoixDemandeur" class="InfoDemandeur" type="text" size="100" onkeyup="JavaScript:SaisieDemandeur()" value="<?php echo $_SESSION['MonIdentite']; ?>" />
								<input name="HChoixDemandeur" id="idHChoixDemandeur" type="hidden" value="<?php echo $_SESSION['CodeUtil']; ?>" />
								<input name="BtnRechManuel" id="idBtnRechManuel" value="Rech" type="button" class="Bouton" onclick="JavaScript:SaisieDemandeur()" />
							</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td>
								<div id="idDivInfosUtilisateur"></div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td align="left">Unité :<input name="SonAffectation" id="idSonAffectation" type="hidden" value="<?php echo $_SESSION['MaClefAffectation']; ?>" /></td>
							<td align="left" id="idTDUnite" class="InfoDemandeur"><?php echo $_SESSION['AffectUtil']; ?></td>
							<td align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tél :
								<input name="SonTelephone" id="idSonTelephone" type="hidden" value="<?php echo $_SESSION['Telephone']; ?>" />
								<input name="SonSiteBatDefaut" id="idSonSiteBatDefaut" type="hidden" value="<?php echo $_SESSION['SiteBatiment']; ?>" />
								<input name="SonEtagePieceDefaut" id="idSonEtagePieceDefaut" type="hidden" value="<?php echo $_SESSION['EtagePiece']; ?>" />
							</td>
							<td align="left" id="idTDTel" class="InfoDemandeur"><?php echo $_SESSION['Telephone']; ?></td>
						</tr>
						<tr>
							<td align="left">Localisation :</td>
							<td align="left" colspan="3">
								<div style="float=left;">Site/Bàtiment </div>
								<div id="idDivLesBatiments" style="float=left;"></div>
								<div style="float=left;">   Etage/Pièce </div>
								<div id="idDivLesLocaux" style="float=left;"></div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
</table>

Source Javascript

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
 
function Init()
{
	var LeBatimentRech="";
	if(document.getElementById('idSonSiteBatDefaut')) LeBatimentRech=document.getElementById('idSonSiteBatDefaut').value;
	var LeLocalRech="";
	if(document.getElementById('idSonEtagePieceDefaut')) LeLocalRech=document.getElementById('idSonEtagePieceDefaut').value;
 
	RecupereSitesBatiments(LeBatimentRech,'SiteBatiment','idDivLesBatiments','ChangtSiteBatiment','O');
	RecupereLocaux(LeBatimentRech,LeLocalRech,'SiteBatiment','EtagePiece','idDivLesLocaux','','O');
}
 
function FermerRecherche()
{
	var obj=document.getElementById('idDivInfosUtilisateur');
 
	obj.setAttribute("class","Cache"); // tous navigateur sauf IE
	obj.setAttribute("className","Cache"); // navigateur IE			
}
 
function SaisieDemandeur()
{
	var DebSaisie=MonTrim(document.getElementById('idChoixDemandeur').value);
	if(DebSaisie.length >3){
		RemontePersonnes(DebSaisie,'idDivInfosUtilisateur','idChoixDemandeur','INPUT');
	}
}
 
function RecupInfoPersonne(code,identite,unite,tel,sitebat,etapie,login,entrepr)
{
	document.getElementById('idHChoixDemandeur').value=code;
	document.getElementById('idChoixDemandeur').value=identite;
 
	document.getElementById('idSonAffectation').value=unite;
	document.getElementById('idSonTelephone').value=tel;
	document.getElementById('idSonSiteBatDefaut').value=sitebat;
	document.getElementById('idSonEtagePieceDefaut').value=etapie;
 
	var obj=document.getElementById('idTDUnite');
	obj.innerHTML=unite;
 
	var obj=document.getElementById('idTDTel');
	obj.innerHTML=tel;
 
	RecupereSitesBatiments(sitebat,'SiteBatiment','idDivLesBatiments','ChangtSiteBatiment','O');
	RecupereLocaux(sitebat,etapie,'SiteBatiment','EtagePiece','idDivLesLocaux','','O');
 
	FermerRecherche();
}
function ChangtSiteBatiment()
{
	var LeBatimentRech="";
	if(document.getElementById('idSiteBatiment')) LeBatimentRech=document.getElementById('idSiteBatiment').value;
	var LeLocalRech="";
	if(document.getElementById('idEtagePiece')) LeLocalRech=document.getElementById('idEtagePiece').value;
 
	RecupereLocaux(LeBatimentRech,LeLocalRech,'SiteBatiment','EtagePiece','idDivLesLocaux','','O');
}
 
 
function RecupereSitesBatiments(LeSiteBatiment,NomChpSiteBat,ZoneDiv,Evenement,Modif)
{
	//il faut utiliser le même domaine que la page appelante !
	var url="Web_Services/webs_RecupereBatiments.php?LeSiteBat=" + LeSiteBatiment + "&NomChpSiteBat=" + NomChpSiteBat + "&LeDiv=" + ZoneDiv + "&Evenement=" + Evenement + "&MOD=" + Modif;
	var urlxsl="Web_Services/webs_RecupereBatiments.xsl";
	postHTML(url, urlxsl, "Meme",ZoneDiv); 
 
	document.getElementById(ZoneDiv).setAttribute("class","Visible"); // tous navigateur sauf IE
	document.getElementById(ZoneDiv).setAttribute("className","Visible"); // navigateur IE
}
 
function RecupereLocaux(LeSiteBatiment,LEtagePiece,NomChpSiteBat,NomChpEtaPie,ZoneDiv,Evenement,Modif)
{	
	//il faut utiliser le même domaine que la page appelante !
	var url="Web_Services/webs_RecupereLocaux.php?LeSiteBat=" + LeSiteBatiment + "&LEtagePie=" + LEtagePiece  + "&NomChpSiteBat=" + NomChpSiteBat  + "&NomChpEtaPie=" + NomChpEtaPie + "&LeDiv=" + ZoneDiv + "&Evenement=" + Evenement + "&MOD=" + Modif;
	var urlxsl="Web_Services/webs_RecupereLocaux.xsl";
	postHTML(url, urlxsl, "Meme",ZoneDiv); 
 
	document.getElementById(ZoneDiv).setAttribute("class","Visible"); // tous navigateur sauf IE
	document.getElementById(ZoneDiv).setAttribute("className","Visible"); // navigateur IE
}
 
function RemontePersonnes(Util,ZoneDiv,Objet,TypeObjet)
{
	var url="Web_Services/webs_InfoChoixPersonne.php?IDEN=" + Util + "&CONTEN=" + ZoneDiv + "&OBJ=" + Objet +"&TYPOBJ=" + TypeObjet;
	var urlxsl="Web_Services/webs_InfoChoixPersonne.xsl";
	postHTML(url, urlxsl, "Meme",ZoneDiv);
 
	document.getElementById(ZoneDiv).setAttribute("class","Visible"); // tous navigateur sauf IE
	document.getElementById(ZoneDiv).setAttribute("className","Visible"); // navigateur IE
}
 
// Generation du rendu 
function postHTML(xmlPath, xslPath, Page, ElementId) 
{ 
	var plugin = navigator.plugins["Msxml2.DOMDocument.3.0"];
 
	if(Page=="Meme") var obj=document.getElementById(ElementId);
	else var obj=window.opener.document.getElementById(ElementId)
 
	if (!plugin) {
		try {
			plugin = new ActiveXObject("Msxml2.DOMDocument.3.0");
		} catch(e) {}
	}
 
	var ActixeXPoss='N';
	if(plugin){
		ActixeXPoss='O';
	}
	if(ActixeXPoss == 'N'){
		// script pour tous les navigateurs Firefox Opera ... 
 
  	  	// Chargement XML 
		var xslDocument = loadXML(xslPath); 
        // Chargement XSL 
		var xmlDocument = loadXML(xmlPath); 
 
		var xsltProcessor=new XSLTProcessor(); 
		xsltProcessor.importStylesheet(xslDocument); 
		var htmlCode = xsltProcessor.transformToFragment(xmlDocument,document); 
		obj.appendChild(htmlCode); 
 
		var racine = xmlDocument;
   } 
   else{ 
		// script pour IE 
		// Chargement XML 
		var xml = new ActiveXObject("Microsoft.XMLDOM"); 
		xml.async = false; 
		xml.load(xmlPath); 
 
		// Chargement XSL 
		var xsl = new ActiveXObject("Microsoft.XMLDOM"); 
		xsl.async = false; 
		xsl.load(xslPath); 
		// Transformation 
		obj.innerHTML = xml.transformNode(xsl); 
 
		var racine = xml.documentElement;
   }
 
	if(Page=="Mere"){
		if(ElementId == "iddivLesEchan"){
			// on doit réactualiser l'Onglet Echanges avec Parametres
			var LesInfosOnglet = 	racine.getElementsByTagName('onglet').item(0).childNodes[0].data;
			window.opener.MiseAJourLien('ECH',LesInfosOnglet);
		} 
		window.close();
	}
}

code webs_RecupereBatiments.xsl

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
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="/">
<xsl:variable name="NbSiteBat"><xsl:value-of select="LesLocalisations/nbsitebat" /></xsl:variable>
<xsl:variable name="NomChpSiteBat"><xsl:value-of select="LesLocalisations/nomchpsitebat" /></xsl:variable>
<xsl:variable name="ZoneDiv"><xsl:value-of select="LesLocalisations/zonediv" /></xsl:variable>
<xsl:variable name="Evenement"><xsl:value-of select="LesLocalisations/evenement" /></xsl:variable>
<xsl:variable name="Modif"><xsl:value-of select="LesLocalisations/modif" /></xsl:variable>
 
	<div id="IdBatXSLT">
		<select >
			<xsl:attribute name='name'>
				<xsl:value-of select="$NomChpSiteBat" />
			</xsl:attribute>
			<xsl:attribute name='id'>
				<xsl:value-of select="concat('id',$NomChpSiteBat)" />
			</xsl:attribute>
			<xsl:if test=" $Evenement != '' ">
				<xsl:attribute name='onchange'>
					<xsl:value-of select="concat('JavaScript:',$Evenement,'()')" />
				</xsl:attribute>
			</xsl:if>
			<xsl:if test=" $Modif ='N' ">
				<xsl:attribute name='disabled'>disabled</xsl:attribute>
			</xsl:if>
			<option value=""></option>
			<xsl:for-each select="LesLocalisations/LesSitesBat/site">
				<option>
					<xsl:attribute name='value'>
						<xsl:value-of select="valeur" />
					</xsl:attribute>
					<xsl:if test=" selection = 'O' ">
						<xsl:attribute name='selected'>selected</xsl:attribute>
					</xsl:if>
					<xsl:value-of select="valeur" />
				</option>
			</xsl:for-each>
		</select>
		<input name="ZoneDiv" id="idZoneDiv" type="hidden">
			<xsl:attribute name='value'>
				<xsl:value-of select="$ZoneDiv" />
			</xsl:attribute>
		</input>
	</div>
</xsl:template>
 
</xsl:stylesheet>

code webs_RecupereLocaux.xsl

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
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="/">
<xsl:variable name="NbEtagePiece"><xsl:value-of select="LesLocalisations/nbetagepiece" /></xsl:variable>
<xsl:variable name="NomChpSiteBat"><xsl:value-of select="LesLocalisations/nomchpsitebat" /></xsl:variable>
<xsl:variable name="NomChpEtaPie"><xsl:value-of select="LesLocalisations/nomchpetapie" /></xsl:variable>
<xsl:variable name="ZoneDiv"><xsl:value-of select="LesLocalisations/zonediv" /></xsl:variable>
<xsl:variable name="Evenement"><xsl:value-of select="LesLocalisations/evenement" /></xsl:variable>
<xsl:variable name="Modif"><xsl:value-of select="LesLocalisations/modif" /></xsl:variable>
 
	<div id="IdLocauxXSLT">
		<select >
			<xsl:attribute name='name'>
				<xsl:value-of select="$NomChpEtaPie" />
			</xsl:attribute>
			<xsl:attribute name='id'>
				<xsl:value-of select="concat('id',$NomChpEtaPie)" />
			</xsl:attribute>
			<xsl:if test=" $Modif ='N' ">
				<xsl:attribute name='disabled'>disabled</xsl:attribute>
			</xsl:if>
			<option value=""></option>
			<xsl:for-each select="LesLocalisations/LesEtagesPieces/etagepiece">
				<option>
					<xsl:attribute name='value'>
						<xsl:value-of select="valeur" />
					</xsl:attribute>
					<xsl:if test=" selection = 'O' ">
						<xsl:attribute name='selected'>selected</xsl:attribute>
					</xsl:if>
					<xsl:value-of select="valeur" />
				</option>
			</xsl:for-each>
		</select>
		<input name="ZoneDiv" id="idZoneDiv" type="hidden">
			<xsl:attribute name='value'>
				<xsl:value-of select="$ZoneDiv" />
			</xsl:attribute>
		</input>
	</div>
</xsl:template>
 
</xsl:stylesheet>

code webs_InfoChoixPersonne.xsl

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
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
	<xsl:template match="/">
		<xsl:variable name="Conteneur">
			<xsl:value-of select="LesPersonnes/conteneur" />
		</xsl:variable>
		<xsl:variable name="Objet">
			<xsl:value-of select="LesPersonnes/objet" />
		</xsl:variable>
		<xsl:variable name="NbPerso">
			<xsl:value-of select="LesPersonnes/nbperso" />
		</xsl:variable>
		<xsl:variable name="TypeObjet">
			<xsl:value-of select="LesPersonnes/typeobjet" />
		</xsl:variable>
		<xsl:if test=" $TypeObjet = 'INPUT' ">
			<table name='TablePersonnels' id='idTablePersonnels' class='tableau'>
 
				<tr>
					<td align='right'>
						<img border='0' src='/home/lib/img/Inade/Fermer.gif' title='Fermer cette recherche' style='cursor:pointer'>
							<xsl:attribute name='onclick'>
								JavaScript:FermerRecherche('<xsl:value-of select="$Conteneur" />')
							</xsl:attribute>
						</img>
						<input name='Conteneur' id='idConteneur' type='hidden'>
							<xsl:attribute name='value'>
								<xsl:value-of select="$Conteneur" />
							</xsl:attribute>
						</input>
					</td>
				</tr>
				<xsl:if test=" $NbPerso >0 ">
					<xsl:for-each select="LesPersonnes/liste/personne">
						<tr>
							<td align='left'>
								<a title='Retenir cette personne'>
									<xsl:attribute name='href'>
										JavaScript:RecupInfoPersonne('<xsl:value-of select="valeur" />','<xsl:value-of select="affichage" />','<xsl:value-of select="unite" />','<xsl:value-of select="tel" />','<xsl:value-of select="sitebat" />','<xsl:value-of select="etapie" />','<xsl:value-of select="login" />','<xsl:value-of select="entrepr" />')
									</xsl:attribute>
									<xsl:value-of select="affichage" />
								</a>
							</td>
						</tr>
					</xsl:for-each>
				</xsl:if>
				<xsl:if test=" $NbPerso =0 ">
					<tr>
						<td align='left'>Aucune personne ne correspond</td>
					</tr>
				</xsl:if>
 
			</table>
		</xsl:if>
		<xsl:if test=" $TypeObjet != 'INPUT' ">
			<div>
				<input name='Conteneur' id='idConteneur' type='hidden'>
					<xsl:attribute name='value'>
						<xsl:value-of select="$Conteneur" />
					</xsl:attribute>
				</input>
				<xsl:variable name="Evenement">
					JavaScript:FrappeClaviersurListe('','Id','<xsl:value-of select="concat('id' , $Objet)" />',event)
				</xsl:variable>
				<select>
					<xsl:attribute name='name'>
						<xsl:value-of select="$Objet" />
					</xsl:attribute>
					<xsl:attribute name='id'>
						<xsl:value-of select="concat('id' , $Objet)" />
					</xsl:attribute>
					<xsl:attribute name='onkeyup'>
						<xsl:value-of select="$Evenement" />
					</xsl:attribute>
					<option value="">Sélectionnez ...</option>
					<xsl:if test=" $NbPerso >0 ">
						<xsl:for-each select="LesPersonnes/liste/personne">
							<option>
								<xsl:attribute name='value'>
										xsl:value-of select="valeur" />
								</xsl:attribute>
								<xsl:value-of select="affichage" />
							</option>
						</xsl:for-each>
					</xsl:if>
				</select>
			</div>
		</xsl:if>
	</xsl:template>
</xsl:stylesheet>

**ulmeen** · 15/03/2016, 09h45

Voici un bon affichage sur IE11 et un mauvais sur Edge
Nom : BonAffichage.JPG
Affichages : 1065
Taille : 27,9 Ko

Nom : MauvaisAffichage.jpg
Affichages : 1053
Taille : 27,3 Ko

**buck21490** · 16/03/2016, 09h33

J'ai constaté le même problème depuis le passage à la version 13.10586 alors que cela fonctionné très bien avec la version précédente 12.

Il semble que le code inséré avec la méthode appendChild ne soit plus correctement interprété. J'ai contourné le problème de la façon suivante pour le moment :

Code :

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

1
2
3
4
5
 
if (navigator.userAgent.indexOf("Edge") > 0)
		document.getElementById(this.divName).innerHTML = new XMLSerializer().serializeToString( dwXHTML );
	else	
		document.getElementById(this.divName).appendChild(dwXHTML);

**thelvin** · 16/03/2016, 15h16

J'ai pas de Edge sous la main pour tester, mais :

Pour information, on ne peut pas faire appendChild() d'un nœud qui vient d'un autre document, c'est clairement spécifié par les règles. Bon, les navigateurs normaux n'en ont rien à cirer, mais ça perturbe peut-être Edge.

Avant de faire appendChild() il faut faire document.importNode(). Donc ça devrait ressembler à obj.appendChild(document.importNode(htmlCode));.
De là à ce que le problème vienne de là, c'est à vérifier.

D'un autre côté, sérialiser le nœud en HTML et l'insérer ensuite avec innerHTML, c'est finalement la même idée, c'est plus clair et ça ne peut que marcher. Même pas vraiment besoin de ne le faire que pour Edge, puisqu'on n'est jamais censé faire appendChild() d'un nœud qui vient d'un autre document.
La seule différence notable c'est les performances. Mais bon, on fait tout ça après avoir lancé une transformation XSLT. Alors les performances, hein...

Transformation XSLT inopérante avec Edge

XSL/XSLT/XPATH XML

Vue hybride

Discussions similaires

Partager

Partager