[Javascript] Librairie de compatibilité

Salut!

Je développe depuis 3 ou 4 mois avec Javascript, et j'ai été surpris par les nombreux problèmes de compatibilité entre les navigateurs. Je propose de développer une librairie afin d'obtenir une banque de fonctions standards compatibles avec les différents navigateurs. Un exemple des fonctions recherchées:

- GetBrowser (type et la version du navigateur)
- GetMousePos (position de la souris)
- GetScrollPos (position du scroll)
- GetWinDim (dimensions de la page)
- Set & GetVisibility (status du style visibility)
- etc...

Ce projet permettrait de ne plus se soucier de la compatibilité des fonctions.
Que pensez-vous du projet?

Merci de votre participation!

La 1ère fonction, détecter l'OS du client:

Code :

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

1
2
3
4
5
6
7
8
function Plateforme(){
  if(navigator.appVersion.indexOf("Win")>-1) return"Windows";
  if(navigator.appVersion.indexOf("Macintosh")>-1) return"Macintosh";
  if(navigator.appVersion.indexOf("X11")>-1) return"Unix";
  if(navigator.appVersion.indexOf("Unix")>-1) return"Unix";
  if(navigator.appVersion.indexOf("Linux")>-1) return "Unix";
  return "Unknown";
}

La seconde fonction est impressionante!
Il sagit de détecter le navigateur du client. Elle intègre aussi le code pour obtenir l'OS utilisé:
http://sub0.developpez.com/javascript/detect.js.txt

Seulement, je préfère détecter le navigateur du client comme ceci:

Code :

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

1
2
3
4
5
6
7
8
var ns4=document.layers;
var ie4=document.all;
var ns6=document.getElementById && !document.all;
 
if(ns6){  // Navigateur Netscape 5 et plus et DOM-1.
}else if(ns4){  // Navigateur Netscape 4.7 et moins. 
}else if(ie4){  // Internet Explorer et Opera
}

Pour pouvoir faire des tests sous windows, je possède:
• IExplorer 6
• NetScape 4.78
• NetScape 6
• Mozilla 1.3
• FireFox 0.9.3
• Opera 7.23

Si vous avez des remarques, je suis preneur, à+

Voici ce que j'obtiens actuellement:

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
var agt=navigator.userAgent.toLowerCase();
var ns4=document.layers; 
if(document.all){
    if(agt.indexOf('opera')>-1) var opera=true;else var ie=true; }else
if(document.getElementById){
    if(agt.indexOf('netscape')>-1) var ns6=true;else 
    if(agt.indexOf('firefox')>-1) var ffx=true;else var moz=true; }
 
if(ns4){ 
    alert('NetScape 4.x');
}else if(opera){ 
    alert('Opera')
}else if(ie){
    alert('IExplorer')
}else if(ns6){  
    alert('NetScape 6');
}else if(ffx){  
    alert('FireFox');
}else if(moz){
    alert('Mozilla');
}else{
    alert('unknow');
}

Quelques liens intérressants:
http://www.mozilla.tlk.fr/doc05.php
http://www.quirksmode.org/js/dhtmloptions.html

Résolution de l'écran...

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
function resolution() {
 
nav = navigator.appName;
 
ah = screen.availHeight;
al = screen.availLeft;
at = screen.availTop;
aw = screen.availWidth;
cd = screen.colorDepth;
h  = screen.height;
pd = screen.pixelDepth;
w  = screen.width;
 
res = 'availHeight:\t' + ah + '\n';
 
if (nav == 'Netscape') {
	res = res + 'availLeft:\t' + al + '\n';
	res = res + 'availTop:\t' + at + '\n';
	}
 
res = res + 'availWidth:\t' + aw + '\n';
res = res + 'colorDepth:\t' + cd + '\n';
res = res + 'height:\t\t' + h + '\n';
 
if (nav == 'Netscape')
	res = res + 'pixelDepth:\t ' + pd + '\n';
 
res = res + 'width:\t\t' + w + '\n';
alert(res);
 
}

Faudrait voir maintenant avec quels OS et navigateurs cela ne fonctionne pas...
Hélas, je ne les ai pas tous (avec MAC par exemple).
Si vous pouviez m'aider ça serait super!

Salut Eldacar!

Envoyé par Eldacar

Tu comptes le distribuer gratuitement une fois terminé ?

Bien entendu, c'est l'objectif!
Surtout si vous participé à ce topic, ça m'encouragerais à progresser.

Je ne connais JS que depuis quelques mois seulement.
Je suis à la recherche de développeurs doués en JS qui pourront me conseiller et de "testeurs".
Je ne peux tester la lib que sous Win avec les navigateurs suivants:
• IExplorer 6
• NetScape 4.78
• NetScape 6
• Mozilla 1.3
• FireFox 0.9.3
• Opera 7.23

Merci d'avance pour votre participation!

Excelent!!
Je te tiens au courant dès que j'ai des fonctions à tester!
En ce moment, je suis entrain de travailler sur les fonctions suivantes:
Résolution de l'écran, dimensions, positions de la fenêtre, de la page, d'un objet, etc...
Tout ce qui se rapporte au positionnement.

Merci beaucoups!

http://www.mozilla.tlk.fr/doc03.php

http://www.fastclemmy.com/index.php?viewlog=75_contourner-les-defauts-limitations-bugs-d-Internet-Explorer

http://www.aidejavascript.com/article82.html

Salut!
Je vais placer ici quelques liens intéressants pour le projet.
Si vous en connaissez des biens, n'hésitez pas à les poster...
En ce moment, je travaille essentiellement sur le positionnement et dimensionnement & évènements souris :

Voici déjà une librairie de compatibilité Javascript trouvée sur le net :
http://www.devparadise.com/technoweb/code/jscript/a385.php
http://www.devparadise.com/technoweb/code/jscript/a305.php
http://download.devparadise.com/libv1.zip

Test n°1 : Il s'agit d'obtenir les coordonnées de la souris et de déplacer un div (genre info-bulle). La souris doit se trouver exactement dans le coin supérieur gauche du div. J'ai ajouté une table de 2000 x 2000 pixels en arrière-plan pour vérifier que les scrollbars n'altèrent pas le positionnement du div. Le redimensionnement et la position de la fenêtre ne devront pas interferer dans le fonctionnement de la démo :

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
<html> 
 
<script type="text/javascript">
<!--
//============================================================ 
// Détermine le navigateur
//============================================================ 
var nsv=document.layers;
var iev=document.all;
if(!iev)var mov=document.getElementById;
var MouseX=0; 
var MouseY=0;
var ScrollX=0;
var ScrollY=0;
 
 
//============================================================ 
// Retourne la position des scrollbars
//============================================================ 
function GetScrollPos(){
  var curScrollX=ScrollX;
  var curScrollY=ScrollY;
  if(nsv){
    ScrollX=window.pageXOffset;
    ScrollY=window.pageYOffset;
  }else{
    if(document.documentElement.scrollLeft)
      ScrollX=document.documentElement.scrollLeft;
    else ScrollX=document.body.scrollLeft;
    if(document.documentElement.scrollTop)
      ScrollY=document.documentElement.scrollTop;
    else ScrollY=document.body.scrollTop;
  }
  if(curScrollX!=ScrollX||curScrollY!=ScrollY) NewScrollPos();
}
 
 
//============================================================ 
// Retourne la position de la souris
//============================================================ 
function GetMousePos(e){
  var curMouseX=MouseX;
  var curMouseY=MouseY;
  if(nsv){
    MouseX=e.pageX-2-ScrollX;
    MouseY=e.pageY-2-ScrollY;
  }else if(mov){
    MouseX=e.clientX;
    MouseY=e.clientY;
  }else{ 
    MouseX=window.event.x;
    MouseY=window.event.y;
    if((navigator.userAgent).indexOf('Opera',0)<0){ 
      MouseX=MouseX-2; 
      MouseY=MouseY-2;
    }
  }
  if(curMouseX!=MouseX||curMouseY!=MouseY) NewMousePos();
}
 
 
//============================================================ 
// Appellée par une nouvelle position des scrollbars
//============================================================ 
function NewScrollPos(){ ReplaceDiv(); }
 
 
//============================================================ 
// Appellée par une nouvelle position de la souris
//============================================================ 
function NewMousePos(){ ReplaceDiv(); }
 
 
//============================================================ 
// Réactualise la position du div
//============================================================ 
function ReplaceDiv(){
  if(nsv){ 
    document.divbulle.left=ScrollX+MouseX;   
    document.divbulle.top=ScrollY+MouseY;
  }else{ 
    document.getElementById('divbulle').style.left=ScrollX+MouseX;        
    document.getElementById('divbulle').style.top=ScrollY+MouseY;
  }
}
 
//============================================================ 
// Initialisation 
//============================================================ 
if(nsv) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=GetMousePos;
setInterval('GetScrollPos()',1);
 
 
 
//============================================================ 
//-->
</script>
 
 
<body>
 
<table border="0" style="background:silver;">
<tr><td width="2000" height="2000"><p>&nbsp;</td></tr>
</table>
 
<div id="divbulle" style="position:absolute;left:0;top:0;">
  <table border="0" style="background:red;">
  <tr><td width="50" height="50"><p>&nbsp;</td></tr>
  </table>
</div>
 
</body>
</html>

J'ai déjà testé ce code sous win xp avec IE6, Opera 7.23, Mozilla 1.3, Netscape 4.78...
Tous les tests avec d'autres OS et navigateurs m'intéressent !!

pour votre participation.

Selon vous, Netscape 4.78 est-il un navigateur obsolète ?
Est-ce qu'en prévoyant l'intégration de ce navigateur, on assure pas davantage la compatibilité des fonctions ?
...son intégration demande beaucoups de travail...

Envoyé par Sub0

Selon vous, Netscape 4.78 est-il un navigateur obsolète ?

Totalement

D'après les stats de mon site du boulot, il représente moins de 0.5% !!!! (0.3% pour être précis)

Les 4 premiers sont :
IE : 77.8%
Firefox : 17.2%
Mozilla : 1.8%
Opera : 1.2%
tout le reste représente moins de 1%...

Et encore il s'agit d'un site d'informatique, donc il y a un certain nombre de connaisseurs qui le visitent ce qui explique le taux "important" des navigateurs alternatifs à IE...

Sub0,

Tout d'abord je tiens à te féliciter et t'encourager dans cette heureuse initiative.
J'avoue avoir tendance à calquer mon degré d'intérêt de la compatibilité de mes sites sur les pourcentages statistiques des utilisation de browser
Je me contente en général d'instructions basiques reconnues par la majorité des navigateurs et finis souvent par obtenir de codes allambiqués...
J'ai d'ailleurs tout récemment modifié un code de saisie de date sur la base d'un calendrier en convertissant les dates en string de façon à pouvoir les comparer quelque soit le browser et l'OS... (Je le paufine et je le mettrait dans les codes source)
Je ne suis pas partisan des codes à rallonges avec des if (nav=="IE") mais de plus en plus avec les palms et autre supports il va falloir sniffer correctement les browsers et agir en conséquence j'ai d'ailleurs récupérer quelques sniffers intéressants que je mettrais ici ...

Bref une bibli de code transbrowser sera vraiment top, a mon gout ne pas y trouver de tonne de if ou de case serait l'idéal ...

Oui je sais c'est beau l'utopie ...

Meci pour cette magnifique contribution Sub0

Puisqu'on en est à philosopher sur le javascript j'y vais de mon grain de sel

Perso je ne l'utilise que le strict minimum, juste pour afficher un popup quand j'en ai vraiment besoin, ou amener le focus sur un champ d'un formulaire, c'est tout. Et ce genre de code marche pour tous les browsers (si on met la hierarchie complète d'objets et non des "raccourcis" comme IE permet de faire).

Javascript pouvant être désactivé, les codes de validation de données de formulaire devraient se faire exclusivement sur le serveur, pour moi ça ne sert pas à grand chose de le faire côté client. De plus, c'est parfois plus pratique côté serveur si tu dois vérifier la cohérence d'un champ par rapport à une BD.

Merci à vous pour votre soutien et vos encouragements.

Ok, mettons NS4.78 aux oubliettes... définitivement !
Cependant je tiens à ce que le visiteur qui utilise un navigateur non compatible avec la lib soit averti (pour être redirigé par exemple). Je pense dresser la liste des configs compatibles réellement testées. C'est pour cette raison que j'ai commencé ce projet par une fonction pour récupérer l'OS, le nom et la version du navigateur, sans oublier la version de 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
<!-- Détermination de la version de JS -->
<script language="JavaScript">var v=1.0,lang='JavaScript';</script>
<script language="JavaScript1.1">v=1.1;</script>
<script language="JavaScript1.2">v=1.2;</script>
<script language="JavaScript1.3">v=1.3;</script>
<script language="JavaScript1.4">v=1.4;</script>
<script language="JavaScript1.5">v=1.5;</script>
<script language="JavaScript1.6">v=1.6;</script>
<script language="JScript">
 var v2=v;if(typeof ScriptEngine=="undefined"){ 
 lang='JScript';v=1; }else{ lang=ScriptEngine();
 v=[ScriptEngineMajorVersion(),ScriptEngineMinorVersion(),ScriptEngineBuildVersion()];
 v=v.join('.'); }</script>
<script language="JavaScript">jstext1=lang+' version '+v;</script>
<script language="JScript">jstext2='JavaScript version '+v2;</script> 
<noscript><p>Javascript introuvable...</noscript>

Comme vous pouvez le constater, je ne cherche pas qu'à réaliser une lib super simple qui rendra nos développement plus faciles, mais surtout à rassembler le maximum de fonctions systèmes et les valider en les testant avec toutes les configs disponibles... A terme, l'objectif est que cette lib puisse répertorier et fournir des fonctions de haut niveau très sûres, lesquelles nous permettront le développement d'autres librairies plus spécifiques et totalement compatibles (date, math, formulaire, images, etc...). J'espère que mon idée vous séduira et que vous aurez le temps de participer à la réalisation de ce "grand" projet.

Merci.

Salut!

Je songeait à une astuce pour valider les configs. En cas d'erreurs (exceptions), demander à l'utilisateur d'accepter de poster un tout petit formulaire (genre rapport d'erreur). J'enregistrerai alors dans une base de données, les infos sur leur configuration et les erreurs... On peut éventuellement imaginer un check de toutes les fonctions dans cette procédure... On peut également proposer une mise à jour de la liste des config validées si un utilisateur en possède une... Qu'en pensez-vous ?

Autre chose, selon vous, quelles sont les versions de Javascript les plus utilisées et quelles sont les versions obsolètes ?
Devra-t-on tenir compte de chaque version pour valider une config ?