Incompatibilité d'un script ( IE Vs Safari)

Signaler
Messages postés
8
Date d'inscription
lundi 14 mai 2007
Statut
Membre
Dernière intervention
5 mars 2010
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Voila j'ai telecharger un menu ici meme et il fonctionne tres bien mais dans le parc ou je suis il y a 3 empecheur de tourner en rond :) des macs et donc sur safari tout nes'effectue pas,

je m'explique j'ai un menu horizontal a multi-niveaux et sous safari un seul des onglet defile :S

voici le script quelqu'un peut peut-etre me dire comment l'adapter pour qu'il fonctionne en meme temps sur safari et sur IE

var l=document.getElementById("Menu").getElementsByTagName('LI');
 for ( var n=0; n<l.length; n++ )
 {
  l[n].unselectable="on"; // pour faire plus propre : "non sélectionnable", ne fonctionne pas avec FF ?
  if ( l[n].getElementsByTagName('UL') && l[n].getElementsByTagName('UL').length>0 )
    {
     l[n].onmouseover = function()
       { 
        this.getElementsByTagName('UL')[0].style.visibility="visible";
        // au survol, on montre l'élément
       } 
     l[n].onmouseout = function() 
       { 
        this.getElementsByTagName('UL')[0].style.visibility="hidden"; 
        // on le cache, dès que la souris ne survole plus
       }
     l[n].getElementsByTagName('A')[0].innerHTML+="&nbsp;";
     // flêche pour indiquer qu'il y a des sous-menus
    }
  else {
     l[n].getElementsByTagName('A')[0].innerHTML+="";
     // pour permettre de détecter le survol "hors du texte" avec IE
    }
 }

Merci d'avance

21 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    tiens... serait-ce mon menu qu'il a été mis ici par moi ?
    je n'ai pas de mac, donc pas de safari, je vais avoir
       du mal à aider.
    mais d'autres intervenants devraient passer....

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

C'est tout simple il me semble:

var l=document.getElementById("Menu").getElementsByTagName('LI');

Le deuxième appel de méthode est incorrect car getElementById retourne une collection d'éléments (un tableau en fait), et ce tableau ne contient pas pas la méthode getElementsByTagName()

(IE rajoute cette méthode dans le tableau, mais ce comportement n'est pas correct car la méthode n'est pas un élément HTML valide que devrait retourner getElementById).

Les méthodes "getElement(s)By...()" ne s'appliquent qu'à un document, pas à un élément ou un tableau d'éléments.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>car getElementById retourne une collection
>>d'éléments (un tableau en fait)
pas du tout ! d'ailleurs un ID est
obligatoirement unique dans une page

.getElementsByTagName lui oui
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
mais bon... aujourd'hui on fait
un menu uniquement en css
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
petite précision encore,
avec Safari sous Windows (xp) ça fonctionne
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

Ceci dit, ça marche dans Chrome (basé aussi sur le moteur HTML5 de WebKit). Le problème peut éventuellement provenir du fait que l'id "Menu" n'est pas unique dans ton document comme il le devrait; auquel cas, getElementById() ne retourne pas un seule élément, mais peut retourner un tableau d'éléments (indexés par numéro 0 à n-1) ou bien un seul mais pas le bon, ou voire NULL.
Vérifie ton code HTML pour voir si tes ID's sont uniques.
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

En théorie oui, un ID est unique dans une page. Mais il arrive facilement que ce ne soit pas le cas. Dans ce cas le comportement de getElementById (noter le singulier dans le nom de la méthode) est indéfini et varie d'un navigateur à l'autre.
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

Si tu as Safari ou Chrome, utilise la Console Javascript pour le vérifier.
Tu as en bas de la fenêtre de la console une ligne qui commence par un ">" en bleu, qui permet de regarder ce que te retourne document.getElementById("Menu") quand ta page HTML est affichée. tu verras ensuite le type d'objet (que tu peux dérouler en cliquant le triangle avant la valeur affichée).
Cette console Javascript est extrèmement utile (et bien plus pratique que celle que propose IE via sa barre d'outils optionelle pour développeurs...)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
dans le script originel, bien entendu
1 seul ID="Menu", en fait on s'en
balance car getElementById délivrerait
le 1er.
>>auquel cas, getElementById() ne retourne pas un seule
>>élément, mais peut retourner un tableau d'éléments
en aucun cas... tester pour voir.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12


<script>
alert(document.getElementById("txt").value);
</script>


>>et bien plus pratique que celle que propose IE
vraiment une question de goût ! surtout avec IE8 !
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

(d'une façon générale, j'omet presque toujours de mettre des id dans le HTML, c'est pas pratique du tout avec du code HTML généré par des templates). Au lieu de cela, j'utilise des classes et getElementsByClassName() qui retourne toujours un tableau d'éléments.
C'est aussi plus facile de concevoir la feuille de style CSS à base de sélecteurs de classes (préfixées par un point) plutôt que de sélecteurs d'ID (commençant par un dièse).
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
chacun ses goûts...
mais getElementByID ne renvoie jamais un array
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

Ton test n'est pas concluant: s'il y a plusieurs éléments avec le même ID, le résultat n'est pas spécifié, tout bonnement car le document HTML n'est pas conforme. Les navigateurs font alors "comme ils peuvent".
Je ne me baserai pas sur le fait que ça marche dans un navigateur pour conclure que ça marchera dans un autre (car ça peut aussi changer d'une version à l'autre), et en tout cas le navigateur n'a pas nécessairement à retourner le premier élément uniquement, il pourrait aussi bien ne rien retourner du tout.
La bonne solution est donc de vérifier le code HTML et vérifier que les IDs sont uniques (et surtout pas se dire "on s'en balance"), ou bien utiliser un nom de classe à la place (afin d'avoir toujours un tableau, dans lequel le javascript pourra choisir lui-même quoi faire s'il y a plusieurs éléments dedans).
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
fais le "conforme" ! ce sera la même chose.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>Je ne me baserai pas sur le fait que ça marche dans
>>un navigateur pour conclure que ça marchera dans un
>>autre (car ça peut aussi changer d'une version à l'autre),
testé avec Fx, Opera, Ie, Safari, Chrome, K-Meleon
je ne dis pas que c'est bien de faire ça, je dis
que les navigateurs (tous), ne retournent
JAMAIS un array avec getElementById quelles
que soient les circonstances
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

Ton JAMAIS est en trop. Je peux te dire que j'ai déjà vu le cas !
De même que le cas où le navgateur retournait NULL (ce qui déclencherait une exception avec le code ci-dessus, et terminerait donc prématurément l'exécution du script).
J'en ai vu de telles aberrations dans le code HTML (y compris celui présent sur ce site, qui génère des TAS d'exceptions, le plus souvent à cause du code publicitaire).
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>Je peux te dire que j'ai déjà vu le cas !
ce serait un bug du navigateur !
encore une fois, par définition, un ID est
obligatoirement unique dans une page, getElementById
ne peut pas renvoyer un array.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
et quand je dis un bug, c'est bien plus que cela,
ce serait une abération. ça se saurait si un
quelconque navigateur avait un jour fait cela !
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
et pour conclure essaye donc
document.getElementById("id cherché")[index]
dans tous les navigateurs, tous te donnent
une erreur
Messages postés
202
Date d'inscription
vendredi 27 janvier 2006
Statut
Membre
Dernière intervention
29 janvier 2019

>>et bien plus pratique que celle que propose IE
> vraiment une question de goût ! surtout avec IE8 !
IE8 reste encore d'une lenteur incroyable, surtout pour son Javascript bogué, et son HTML toujours pas conforme.
Je ne nie pas qu'on doit tester IE, mais avec IE il faut tester trop de versions, et la moindre petite erreur mineure le fait retourner à son mode "Quirks", ce qui ne facilite pas du tout le débogage.
Et puis utiliser des alert() pour déboguer, il n'y a rien de pire.
On a plus vite fait de développer sur Webkit (Chrome ou Safari) ou Firefox, pour ensuite seulement adapter sur IE, plutôt que faire l'inverse (dans ce cas le code Javascript ou CSS est tellement bourré de mauvais contournements qu'on a plus vite fait de tout refaire).

De toute façon, IE est mort pour moi, et c'est tant mieux (Et il n'est plus inclus dans Windows 7 en Europe. Qui va vouloir encore l'installer sur Windows 7 après tous les déboires dans les version d'IE incompatibles même entre elles?)

Il suffit de voir les performances (utiliser un webmail riche comme Gmail est d'une lenteur incommensurable pour la moindre action dans IE, par exemple pour sélectioner tous les messages d'un dossier affiché, ou pour faire des opérations de copier-coller dans un message composé, ou pour utiliser un site très dynamique avec du code AJAX, alors qu'on a une réponse instantanée dans Chrome ou Firefox).

La lenteur d'IE est devenu même un problème de fiabilité (et une constante source d'horripilation), car il exécute ses actions avec tellement de retard qu'il arrive qu'on fasse une action non voulue, comme par exemple cliquer sur un bouton qu'on ne voulait pas cliquer (par exemple en voulant cliquer un message à lire dans un webmail ou un forum, alors que finalement un bouton "effacer" ou un lien publicitaire apparait 3 secondes après, en déplaçant le contenu affiché, et exécute ce clic !)