[AJAX] Comportement inégal des navigateurs : test de fichiers html
Bonjour à la communauté,
Je débogue un moteur de recherche écrit en javascript (dont je ne suis l'auteur).
En voici le contexte:
C'est une documentation d'un script php généré par un script perl avec une sortie en arborescence de 3500 fichiers. La présentation est généré en fichiers html accessibles aussi bien en local (comme un document) qu'en distant.
Il y a deux frames : une pour un tree menu en js(name=nav), une autre pour l'affichage du contenu(name=docview).
Le moteur de recherche , qui se situe dans la frame docview, avant modification amené vers des pages 404 (voir une erreur d'exception sous firefox) car il ne vérifiait pas la présence des fichiers.(car les entrées utiilsateur sont des recherches de fichiers)
Je me suis donc tourné vers le langage AJAX pour arriver à mes fins.
Voici la partie utile du code que j'ai écris :
Code:
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
|
xhr = null;
follow = null;
//ajout : vérification asynchrone que le fichier existe !
function searchfile(file){
//la variable 'file' est un chemin relatif !
if ( window.XMLHttpRequest ) { xhr = new window.XMLHttpRequest();
}else{
if ( window.ActiveXObject ) { xhr = new window.ActiveXObject( "Microsoft.XMLHTTP" );
}else{
throw "plateforme non supportée";
}
}
if ( !xhr ){throw "erreur !";}
xhr.open( "HEAD", file, true )
try{
xhr.send(null);
}
catch (e){
alert('requête erronée');//seul Firefox en local capte l'erreur -> domaine file:///
}
xhr.onreadystatechange = function(){
// la requête est revenue et la page existe :
if(xhr.status != 404 && xhr.readyState == 4){
// on va sur la page de résultats.
window.location.href = file;
// si la page n'existe pas :
}else if(xhr.status == 404){
// on le signale dans le champs !
document.forms['search'].searchtext.value = 'valeur erronée !';
location.reload();
}
// si erreur, on n'ajoute pas la recherche dans le cookie !
follow = xhr.status;
};
} |
la fonction searchfile étant appelé dans une autre :
Code:
1
2
3
4
5
6
7
8
9
10
11
|
// la variable target est l'entrée du user
// la variable globale relbase est le chemin relatif du dossier
function jumpFunction(target) {
var target=target.replace(/[()]/g,'');
target=target.toLowerCase();
file = relbase+'_functions/'+escape(escape(pesc(target)))+ext;
searchfile(file);
// la fonction logFunction ajoute l'entrée dans un cookie.
if (follow != null) logFunction(target);
} |
et voici le code du formulaire :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script language="JavaScript" type="text/javascript">
<!--
document.writeln('<div class="searchfox">');
document.writeln('<table class="searchfoxtable"><tr><td class="searchfoxtitle">Recherches :<\/td><td class="searchfoxhistorik"><a href="javascript:showSearchPopup()">Historique</a><\/td><\/tr><\/table>');
document.writeln('<form name="search" onsubmit=\'return jump()\'>');
document.writeln('<input type="text" class="searchfoxtext" name="searchtext" size="30" value="" onfocus="javascript:this.value=\'\';this.style.textDecoration=\'none\';this.style.color=\'white\';">');
document.writeln('<input type="submit" class="searchfox-button" value="recherche"><br />');
document.writeln('<input type="radio" name="choix" value="1" checked><a href="_classes/index.html">Classe<\/a>');
document.writeln('<input type="radio" name="choix" value="2"><a href="_functions/index.html">Fonctions<\/a>');
document.writeln('<input type="radio" name="choix" value="3"><a href="_variables/index.html">Variables<\/a>');
document.writeln('<input type="radio" name="choix" value="4"><a href="_constants/index.html">Constantes<\/a>');
document.writeln('<input type="radio" name="choix" value="5"><a id="funcsearchlink" href="_tables/index.html">Tables<\/a>');
document.writeln('<\/form>');
document.writeln('<\/div>');
// -->
</script> |
le fonctionnement normal du moteur :
->la requête vérifie si l'entrée de l'utilisateur est un fichier valide dans le dossier destinataire (5 choix possibles via des boutons radio)
|-> si oui, on renvoit sur la page html et on ajoute l'entrée au cookie.
|-> si non, on reste sur la page actuelle, on signale l'erreur dans le champs recherche et on n'ajoute pas l'entrée dans le cookie.
-> le moteur de recherche fonctionne tout à fait normalement si ma documentation est en localhost (sur wamp, donc avec un domaine en http://localhost/doc)
Je ne rencontre que des dysfonctionnement en local lorsque la barre d'adresse du navigateur affiche : file:///.....
tous navigateurs confondus :
- voici les tests effectués :
- test 1: l'ajax ne fonctionne pas.
- test 2: Mais si l'entrée de l'utilisateur est correcte, on est bien redirigé vers la bonne page (sauf pour Internet Explorer 8 qui ne fait rien, feigniasse :mouarf:)
- test 3 :si l'entrée de l'utilisateur est incorrecte :
Sous Firefox : Mon test d'erreur try/catch fonctionne et le script s'arrête.
Sous Google Chrome & opera, le test d'erreur reste sans effet & j'ai des retours 404.
Sous Safari : le chargement de page s'arrête, la barre d'état signale un fichier non trouvé (normal)
J'arrive au bout de mes connaissances d'autodidacte pour finir le débogage du code. je sais qu'il existe une propriété de l'objet window qui pourrait me servir pour jouer avec des conditionnelles (en l'occurrence, document.location.protocol pour test file:///), mais avant de coder, j'aimerais connaître votre avis, avoir des pistes.
Merci de votre patience, c'était un peu long ...:oops:
A+
W
edit: correction du code.
