incompatibilité d'un script ( IE Vs Safari)

Question

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

cs_bultez · Answer

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....

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

verdy_p · Answer

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.

Bul3 · Answer

>>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

Bul3 · Answer

mais bon... aujourd'hui on fait
un menu uniquement en css

Bul3 · Answer

petite précision encore,
avec Safari sous Windows (xp) ça fonctionne

verdy_p · Answer

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.

verdy_p · Answer

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.

verdy_p · Answer

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...)

Bul3 · Answer

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.

Bul3 · Answer

>>et bien plus pratique que celle que propose IE vraiment une question de goût ! surtout avec IE8 !

verdy_p · Answer

(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).

Bul3 · Answer

chacun ses goûts...
mais getElementByID ne renvoie jamais un array

verdy_p · Answer

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).

Bul3 · Answer

fais le "conforme" ! ce sera la même chose.

Bul3 · Answer

>>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

verdy_p · Answer

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).

Bul3 · Answer

>>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.

Bul3 · Answer

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 !

Bul3 · Answer

et pour conclure essaye donc
document.getElementById("id cherché")[index]
dans tous les navigateurs, tous te donnent
une erreur

verdy_p · Answer

>>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 !)

Bul3 · Answer

alors franchement, ton opinion sur IE : rien à cirer
c'est ton avis, ça ne fait pas le moine
ça nous éloigne totalement du sujet et c'est
une polémique ridicule, hors de propos
d'ailleurs ici, la seule chose en cause était
safari sur un mac...

Incompatibilité d'un script ( IE Vs Safari)

21 réponses

Votre réponse

Discussions similaires