1. #1
    Candidat au Club
    Homme Profil pro
    technicien methodes
    Inscrit en
    avril 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : technicien methodes
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : avril 2017
    Messages : 5
    Points : 2
    Points
    2

    Par défaut Compatibilité IE FF Chrome

    bonjour,
    j'ai fait un code en html javascript qui fonctionne tres bien sur IE mais j'ai la fonction postMessage qui ne fonctionne pas sur Chrome et FF
    je vous met mon code
    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
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    <!DOCTYPE html>
    	<html>
    		<head>
    			<meta charset="utf-8"/>
    			<link rel="stylesheet" href="test.css" />
    			<title>Feuille</title>
    			<script>
    				var nom
    				var nom1
    				var nomcomm100
    				var nomcomm200
    				var nomcomm150
    				var nomcomm250
    				var Face100
    				var Face200
    				var fenetre1
    				var fenetre2
    				function envoi(url,url2){
    					fenetre1 = window.open("mondossier/" + url )
    					if( url2.length != 0 ){
    						fenetre2 = window.open("mondossier/" + url2)
    					}
    				}
     
    				function voir_commun(){
    					envoi(nom,nom1)
    					var code = []
    					var code1 = []
    			<!--			lien_iframe()
    					var lignes = document.getElementById("Feuille1").contentWindow.document.getElementById("tableau").rows						
    					for(var i=1; i<=(lignes.length - 1); i++){
    						if(Face100==true){
    							code.push(lignes[i].cells[6].innerText)
    						}
    						else{
    							code.push(lignes[i].cells[5].innerText)
    						}
    					}
    					var lignes1 = document.getElementById("Feuille2").contentWindow.document.getElementById("tableau").rows		
    					for(var i=1; i<=(lignes1.length-1); i++){
    						if(Face200==true){
    							code1.push(lignes1[i].cells[6].innerText)
    						}
    						else{
    							code1.push(lignes1[i].cells[5].innerText)
    						}
    					}
    <!--					var lignes2 = document.getElementById("Feuille5").contentWindow.document.getElementById("tableau").rows	
    <!--					for(var i=2;i<=code.length-1;i++){
    <!--						for(var j=2;j<=code1.length-1;j++){
    <!--							if(code[i]!= "" & code[i] == code1[j]){
    			<!--					alert(j)
    <!--								lignes2[j+1].style.backgroundColor = "#829eeb";
    <!--							}
    <!--						}
    <!--					}
    					var code2 = []
    					var code3 = []
    			<!--			lien_iframe()
    					var lignes = document.getElementById("Feuille3").contentWindow.document.getElementById("tableau").rows						
    					for(var i=1; i<=(lignes.length - 1); i++){
    						code2.push(lignes[i].cells[6].innerText)
    					}
    					var lignes1 = document.getElementById("Feuille4").contentWindow.document.getElementById("tableau").rows		
    					for(var i=1; i<=(lignes1.length-1); i++){
    						code3.push(lignes1[i].cells[5].innerText)
    					}
    <!--					var lignes2 = document.getElementById("Feuille6").contentWindow.document.getElementById("tableau").rows	
    <!--					for(var i=2;i<=code.length-1;i++){
    <!--						for(var j=2;j<=code1.length-1;j++){
    <!--							if(code[i]!="" && code[i] == code1[j]){
    <!--								lignes2[j+1].style.backgroundcolor = "#bdcbf5";
    <!--							}
    <!--						}
    <!--					}
    					fenetre1.postMessage(code,"file://192.168.15.1/web/mondossier")
    <!--					fenetre1.postMessage(code1,"file://192.168.15.1/web/mondossier")
    <!--					if(fenetre2 != null){
    <!--						fenetre2.postMessage(code2,"file://192.168.15.1/web/mondossier")
    <!--						fenetre2.postMessage(code3,"file://192.168.15.1/web/mondossier")
    <!--					}
    				}
    			</script>
    		</head>
     
    		<body>
    			<h1> KIT LIST </h1>
    			<form method="post" action="test.htm" name="formulaire">
    				<p>
    					<label for="liste"> Choisir un code</label><br/><br/>
    					<select id="liste">
    						<option value=""></option>
    						<optgroup label="ici">
    							<option value="ici1 MY100">ici1</option>
    							<option value="ici2 MY100">ici2</option>
    							<option value="ici3">ici3</option>
    						<optgroup label="Et">
    						<optgroup label="la">
    							<option value="la1 MY100">la1</option>
    						</optgroup>
    					</select>
    					<script>
    						var liste = document.getElementById('liste');
    						liste.addEventListener('change', function(){
    							nom = ""
    							nom1 = ""
    							nom = liste.options[liste.selectedIndex].value;
    							<!--alert(nom)
    							if (nom.charAt(nom.length - 5) == "M" ){
    								nom = liste.options[liste.selectedIndex].innerHTML;
    							<!--	alert(nom)
    								nom1 = nom + "_151.htm";
    							<!--	alert(nom1)
    								nom += "_150.htm";
    							<!--	alert(nom)
    							}
    							else {
    							<!--	alert(nom)
    								nom = liste.options[liste.selectedIndex].innerHTML;
    							<!--	alert(nom)
    								nom += ".htm";
    							}
    						})
    					</script>
    					<br/><br/>
    					<!--<input type="submit" value="afficher" />-->
    					<input type="button" value="afficher" onClick="envoi(nom,nom1)"/> 
    				</p>
    				<p>
    					<input type="button" value="commun" onClick="visible()"/>
    					<script>
    						function visible(){
    							var targetElement;
    							targetElement = document.getElementById('commun') ;
    							if (targetElement.style.display == "none")
    							{
    								targetElement.style.display = "" ;
    							} else {
    								targetElement.style.display = "none" ;
    							}
    						}
    					</script>
    				</p>
    				<div id="commun" style="display:none;">
    					<p>
    						<label for="liste1"> Choisir un code</label><br/><br/>
    						<select id="liste1">
    								<option value=""></option>
    							<optgroup label="ici">
    								<option value="ici1 MY100">ici1</option>
    								<option value="ici2 MY100">ici2</option>
    								<option value="ici3">ici3</option>
    							<optgroup label="Et">
    							<optgroup label="la">
    								<option value="la1 MY100">la1</option>
    							</optgroup>
    						</select>
    					</p>
    					<script>
    						var liste1 = document.getElementById('liste1');
    						liste1.addEventListener('change', function(){
    							nomcomm100 = ""
    							nomcomm150 = ""
    							nomcomm100 = liste1.options[liste1.selectedIndex].value;
    							if(nomcomm100.indexOf("F2",0) != -1){
    								Face100 = true
    							}
    							else{
    								Face100 = false
    							}
    							<!--alert(nom)
    							if (nomcomm100.charAt(nomcomm100.length - 5) == "M" ){
    								nomcomm100 = liste1.options[liste1.selectedIndex].innerHTML;
    							<!--	alert(nom)
    								nomcomm150 = nomcomm100 + "_151.htm";
    							<!--	alert(nom1)
    								nomcomm100 += "_150.htm";
    							<!--	alert(nom)
    							document.getElementById("Feuille1").src = "mondossier/" + nomcomm100
    							document.getElementById("Feuille3").src = "mondossier/" + nomcomm150
    							}
    							else {
    							<!--	alert(nom)
    								nomcomm100 = liste1.options[liste1.selectedIndex].innerHTML;
    							<!--	alert(nom)
    								nomcomm100 += ".htm";
    								document.getElementById("Feuille1").src = "mondossier/" + nomcomm100
    							}
    						})
    					</script>
    					<p>
    						<label for="liste2"> Choisir un code</label><br/><br/>
    						<select id="liste2">
    								<option value=""></option>
    							<optgroup label="ici">
    								<option value="ici1 MY100">ici1</option>
    								<option value="ici2 MY100">ici2</option>
    								<option value="ici3">ici3</option>
    							<optgroup label="et">
    							<optgroup label="la">
    								<option value="la1 MY100">la1</option>
    							</optgroup>
    						</select>
    					</p>
    					<script>
    						var liste2 = document.getElementById('liste2');
    						liste2.addEventListener('change', function(){
    							nomcomm200 = ""
    							nomcomm250 = ""
    							nomcomm200 = liste2.options[liste2.selectedIndex].value;
    							<!--alert(nom)
    							if(nomcomm200.indexOf("F2",0) != -1){
    								Face200 = true
    							}
    							else{
    								Face200 = false
    							}
    							if (nomcomm200.charAt(nomcomm200.length - 5) == "M" ){
    								nomcomm200 = liste2.options[liste2.selectedIndex].innerHTML;
    							<!--	alert(nom)
    								nomcomm250 = nomcomm200 + "_151.htm";
    							<!--	alert(nom1)
    								nomcomm200 += "_150.htm";
    							<!--	alert(nom)
    								document.getElementById('Feuille2').src = "mondossier/" + nomcomm200
    								document.getElementById('Feuille4').src = "mondossier/" + nomcomm250
    							}
    							else {
    							<!--	alert(nom)
    								nomcomm200 = liste2.options[liste2.selectedIndex].innerHTML;
    							<!--	alert(nom)
    								nomcomm200 += ".htm";
    							document.getElementById('Feuille2').src = "mondossier/" + nomcomm200
    							}
    						})
    					</script>
    					<p>
    						<input type="button" value="afficher commun" onClick="voir_commun()"/>
    						<script>
     
    						</script>
    					</p>
    					<iframe id="Feuille1" src="" height=0 width=0 style ="visibility:" > </iframe> 
    					<iframe id="Feuille2" src="" height=0 width=0 style ="visibility:" > </iframe> 
    					<iframe id="Feuille3" src="" height=0 width=0 style ="visibility:" > </iframe> 
    					<iframe id="Feuille4" src="" height=0 width=0 style ="visibility:" > </iframe>
    					</div>
    			</form>
     
    		</body>
     
    	</html>
    voila pour ma feuille qui a le postMessage
    et je la recupere avec ce code sur une autre page
    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
    <body>
    <script>
    <!--	function load(){
    		var code = []
    		window.addEventListener('message',function (event){
    		alert("bou")
    		if(event.origin !== "file://192.168.150.100"){
    			return;
    		}
    		var lignes = document.getElementById("tableau").rows
    		for(var i=1; i<=(lignes.length - 1); i++){
    				code.push(lignes[i].cells[5].innerText)
    		}
     
    		for(var i=2;i<=event.data.length-1;i++){
    			for(var j=2;j<=code.length-1;j++){
    				if(code[i]!= "" && code[i] == event.data[j]){
    					lignes[j+1].style.backgroundColor = "orange";
    				}
    			}
    		}		
    		});
    <!--	}
    </script>
    Tous fonctionne mais quand je clic sur le bouton "afficher commun", il m'ouvre bien mes pages supplémentaire, sur IE, il colorie bien les lignes qui existe déjà mais des que j'essaye sur Chrome ou FF, il ouvre mes pages mais c'est tout c'est ça qui me fait pensait que c'est postMessage qui pose problème

    Merci


    ************************EDIT**********************
    Mon but est de la faire fonctionné sur Chrome d'une tablette si ça change quelque chose

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 643
    Points : 20 917
    Points
    20 917
    Billets dans le blog
    38

    Par défaut



    Je n'ai pas testé, mais dans le code ci-dessous, je crois qu'il y a eu une confusion entre l'opérateur & et && :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if(code[i]!= "" && code[i] == event.data[j]){
      lignes[j+1].style.backgroundColor = "orange";
    }

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  3. #3
    Candidat au Club
    Homme Profil pro
    technicien methodes
    Inscrit en
    avril 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : technicien methodes
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : avril 2017
    Messages : 5
    Points : 2
    Points
    2

    Par défaut

    bonjour,

    merci pour votre réponse
    c'est vrai j'ai fait une bourde mais malheureusement ça ne change rien
    je fait la modifications quand même, histoire d'avoir un code correct

  4. #4
    Candidat au Club
    Homme Profil pro
    technicien methodes
    Inscrit en
    avril 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : technicien methodes
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : avril 2017
    Messages : 5
    Points : 2
    Points
    2

    Par défaut

    rebonjour,

    apres de multiple recherche j'ai fini par voir que c'est la ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("tableau").rows
    qui pose problème à chrome (j'ai reussi à le faire fonctionné sur Firefox)
    je récupéré ce message d'erreur
    "Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame."

    Si ça peut aider à trouvé la solution



    *************************EDIT*****************************

    j'ai modifier mon script pour testé
    ça donne ça :
    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 envoi(url,url2){
    					fenetre1 = window.open("KitList/" + url )
    					if( url2.length != 0 ){
    						fenetre2 = window.open("KitList/" + url2)
    					}
    				}
     
    				function voir_commun(){
    					envoi(nom,nom1)
                                           alert(fenetre1)
    alert(fenetre1.document.getElementById("tableau"))
    alert(fenetre1.document.getElementById("tableau").rows)
    					var lignespage = fenetre1.document.getElementById("tableau").rows
     
    alert("bou")	
    alert(lignespage)	
    									lignespage[6].style.color = lignespage[6].style.backgroundColor = "red";
    sur IE et FF je recupere dans l'ordre des alert
    [object Window]
    [object HTMLTableElement]
    [object HTMLCollection]

    sur Chrome j'ai
    [object Window]
    null
    et plantage

    donc si je comprends bien c'est qu'il n'arrive pas a récupéré ce la page qu'il y a dans fenetre1
    ma question est "pourquoi ?" alors que FF et IE y arrive il devrait pouvoir aussi

    merci

  5. #5
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 109
    Points : 4 093
    Points
    4 093

    Par défaut

    Salut,
    la clé du mystère est dans le message d’erreur :

    Citation Envoyé par icemake Voir le message
    "Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame."
    Pour être bien clair, je parle ici de ton problème avec les iframes. Tu as potentiellement un autre problème avec postMessage vu les URL bizarres que tu utilises (ça ressemble à des IP mais le protocole est file:), mais je ne vais pas en parler dans ce post.

    D’après le document Same Origin Policy for file: URIs, Firefox autorise l’accès entre différents fichiers s’il y a une relation de hiérarchie dans l’emplacement des deux fichiers. Fichier A peut accéder à fichier B si B se trouve dans le même dossier que A, ou dans un sous-dossier.

    Ce document concerne Firefox, et il semblerait qu’IE ait choisi de suivre Firefox sur ce point. En revanche, Chrome ne suit pas cette règle, et donc bloque l’accès entre les pages. Difficile de dire comment et quand ce comportement va évoluer.

    Pour régler ton problème, le plus simple serait de mettre en place un serveur http local. Je ne vais pas rentrer dans les détails, mais tu as tout un panel de solutions à base de suite d’outils (WAMP, EasyPHP) ou bien de scripts légers en Python, Ruby, Node.JS, etc. C’est facile à trouver sur le Net.

    Si ton objectif final est de distribuer ton application au public, tu devras de toute façon cesser d’utiliser le protocole file:, donc autant convertir toutes tes URL en http dès maintenant
    La FAQ JavaScript – Les cours JavaScript – Mon terrain de jeu préféré ? Greasemonkey.
    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  6. #6
    Candidat au Club
    Homme Profil pro
    technicien methodes
    Inscrit en
    avril 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : technicien methodes
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : avril 2017
    Messages : 5
    Points : 2
    Points
    2

    Par défaut

    bonjour,
    tout d'abord merci pour votre réponse

    je comprends un peu mieux l'erreur merci
    j'aurais préféré resté comme ça mais si chrome ne peut pas je vais pas avoir le choix malheureusement
    je vais allez me renseigné sur les serveur http local comme vous me conseillez, je verrais bien ce que ça donne

  7. #7
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 643
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 643
    Points : 20 917
    Points
    20 917
    Billets dans le blog
    38

    Par défaut

    Pour pouvoir utiliser postMessage entre deux pages d'un même site, il faut un serveur HTTPS.

    J'ai fait un test basique en local (serveur XAMPP) avec Chrome sans résultat.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  8. #8
    Candidat au Club
    Homme Profil pro
    technicien methodes
    Inscrit en
    avril 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : technicien methodes
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : avril 2017
    Messages : 5
    Points : 2
    Points
    2

    Par défaut

    bonjour

    merci pour votre réponse

    en fin de compte j'ai arrête de m'obstiné à vouloir le faire fonctionner sur chrome, j'ai mis Firefox sur la tablette est ça fonctionne (j'ai pas besoin que cela fonctionne sur tout les navigateurs)
    bon j'ai un souci de fluidité avec Firefox malheureusement mais bon au moins ça fonctionne
    Quand j'aurais plus de temps je vais quand même regarder pour que ça fonctionne sur Chrome, car je n'y connais vraiment rien en serveur

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Compatibilité IE et Chrome
    Par Speke dans le forum JavaScript
    Réponses: 6
    Dernier message: 22/08/2016, 16h24
  2. Compatibilité IE et Chrome
    Par Roxtir dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 31/12/2013, 11h44
  3. Compatibilité Jquery Safari Chrome
    Par cels dans le forum jQuery
    Réponses: 7
    Dernier message: 05/10/2011, 18h48
  4. Problème compatibilité Ie8 avec FF et Chrome
    Par solorac dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 11/08/2009, 10h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo