Redirection de Page en javascript selon certains critères

Version imprimable

Bonjour,

Je maintiens 2 sites. les deux sont identiques, l'un est en anglais, l'autre en français. Chaque page française possède son doublon anglais dans un autre dossier (un dossier /FR/ et un dossier /EN/).
L'utilisateur a la possibilité de passer d'une langue à l'autre à l'aide d'un simple lien qui pointe vers une page ne contenant que le script qui suit.
2 type d'exceptions sont gérée pour lesquels on ne va pas faire de redirection:
la premiere est lorsqu'il y a une requete en URL (un ? après le nom de la page), la seconde, celle qui me pose problème, est la gestion des pages 404 (si jamais le doublon d'une des 2 langues n'existe pas par exemple on redirige sur google.com).
Je ne suis pas un pro du code et doit avoué que ceci est un assemblage de chose glanné ci et là sur les forums mais fonctionne à merveille (a part ce 404 :mur: )
Le code:

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
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
 
<!--
//Recupere l'URL au complet de la page precedente
var URL = document.referrer;
 
//Cherche différentes valeurs dans l'URL
var PosFR = URL.indexOf("/FR/");
var PosPI = URL.indexOf("?");
 
//REDIRECTION SI ADRESSE NON VALIDE (2 CAS)
 
//REQUETE (REDIRECTION)
 
//Si le site est en français (Si l'URL contient "/FR/")
if (PosFR != -1){
//Si l'URL contient "?" (une requête)
  if (PosPI != -1){
    alert ("Contenu non traduisible");
    URL = "http://www.google.com";
//redirige
    window.location=(URL);
  }
}
//Si le site est en anglais (Si l'URL contient "/EN/")
if (PosFR == -1){
//Si l'URL contient "?" (une requête)
  if (PosPI != -1){
    alert ("Non translatable content");
    URL = "http://www.google.com";
//redirige
    window.location=(URL);
  }
}
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////PARTIE QUI POSE PROBLÈME/////////////////////////////////////////////////////////
//404 (REDIRECTION)
 
//Lis les entêtes
function getXhr(){
  var xhr = null; 
  if(window.XMLHttpRequest){ // Firefox et autres
    xhr = new XMLHttpRequest(); 
  }else if(window.ActiveXObject){ // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }else{ // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    xhr = false;
  } 
  return xhr;
}
 
//teste si la page existe avant ouverture 
function Rediriger(URL){
  var xhr = getXhr();
//On défini ce qu'on va faire quand on aura la réponse
  xhr.onreadystatechange = function(){
// Si le serveur a repondu et que la page n'existe pas 
    if(xhr.readyState == 4 && xhr.status == 404){
      window.location.href='http://www.google.com';
    }else{
      window.location.href = URL;
    }
  }
  xhr.open("GET",URL,true);
  xhr.send(null);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
//TRADUCTION
 
//Si l'URL contient "/FR/"
if (PosFR != -1){
//remplace "/FR/" par "/EN/" (case insensitive)
  URL=URL.replace( new RegExp( "/FR/", "i" ), "/EN/" );
//redirige
  window.location=(URL);
}else{
//sinon remplace "/EN/" par "/FR/" (case insensitive)
  URL=URL.replace( new RegExp( "/EN/", "i" ), "/FR/" );
//redirige
  window.location=(URL); 
}
 
-->

Je ne sais pas ou appelé la fonction Rediriger() ou mieux: pouvoir la supprimer et l'intégrer comme une verification supplémentaire avant de passer d'une page a l'autre.
Merci de votre aide

09/03/2009, 19h51
Bovino

Citation:

la seconde, celle qui me pose problème, est la gestion des pages 404 (si jamais le doublon d'une des 2 langues n'existe pas par exemple on redirige sur google.com).

Pour cela, il faut que tu passes par une requête Ajax (voir les tutos) sauf qu'au lieu de tester xhr.status==200 (la page existe) tu testes sur xhr.status==404 et dans ce cas, tu rediriges vers la page souhaitée.

Merci de ton aide Bovino. Mais je patauge encore...
Voila ou j'en suis (juste le code qui nous interesse):

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
//...
 
//404 (REDIRECTION)
 
 
//Création de l'objet XmlHttpRequest dans la fonction getXhr()
function getXhr(){
  var xhr = null; 
  if(window.XMLHttpRequest){ // Firefox et autres
    xhr = new XMLHttpRequest(); 
  }else if(window.ActiveXObject){ // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }else{ // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    xhr = false;
  } 
  return xhr;
}
 
function go(){
//  alert("URL: "+URL);
  var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 404){
//      alert("404: "+xhr.responseText);
      windows.location = "http://www.google.com";
    }else{
//      alert("200 :)");
      window.location=(URL);
    }
  }
	xhr.open("GET","Home.aspx",true); // home.aspx represente la page d'accueil de mon site
	xhr.send(null);
}
 
 
//TRADUCTION
 
 
//Si l'URL contient "/ccmfr/"
if (PosFR != -1){
//remplace "/ccmfr/" par "/CCM/" (case insensitive)
  URL=URL.replace( new RegExp( "/ccmfr/", "i" ), "/CCM/" );
//redirige
  go();
}else{
//sinon remplace "/CCM/" par "/ccmfr/" (case insensitive)
  URL=URL.replace( new RegExp( "/CCM/", "i" ), "/ccmfr/" );
//redirige
  go();
}
-->

J'ai repris les 2 fonctions du tuto. Dans la fonction go() je teste l'existence de la page ou non sur le serveur (du moins c'est ce que je pense faire). Si la page existe tout se passe bien, si la page n'existe pas la redirection ne se fait pas. Aurais tu une piste?
Lorsque les alert box ne sont pas commentées elles aparaissent plusieurs fois. :cfou:
Une dernière chose: Sais tu a quoi servent les 2 lignes:

Code:

1
2
3
 
xhr.open("GET","Home.aspx",true);
xhr.send(null);

Je retourne bosser les tutos

10/03/2009, 15h49
Bovino

Code:

windows.location = "http://www.google.com";

:nono:
c'est plutôt :

Code:

window.location.href = "http://www.google.com";

ou

Code:

window.location.replace("http://www.google.com");

Mais en tout état de cause, window, pas windows ;)
10/03/2009, 16h00
Anthonyyy

Erreur dans le code

Je viens de le voir aussi. Désolé.
Désormais ça redirige à chaque fois sur Google (pour l'exemple) même quand la page existe.
:f1:

On avance

OK le code fonctionne lorsque je fais précéder la redirection d'un alert box.
Quand je commente les alert, la redirection ne se fait plus. 8O

Mes conaissances limitées en code ne me permettent pas de comprendre ce comportement.

Je sais en revanche que dans les 2 cas (avec ou sans alert) le code ne génère aucune erreur (pas dans le navigateur en tout cas).
Voilà le code fonctionnel:
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 // ... function go(){ var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 404){ alert("404: "+xhr.responseText); window.location = ("http://www.google.com"); }else{ alert("200 :)"); window.location=(URL); } } xhr.open("GET","Home.aspx",true); // home.aspx represente la page d'accueil de mon site xhr.send(null); } //TRADUCTION //Si l'URL contient "/ccmfr/" if (PosFR != -1){ //remplace "/ccmfr/" par "/CCM/" (case insensitive) URL=URL.replace( new RegExp( "/ccmfr/", "i" ), "/CCM/" ); //redirige go(); }else{ //sinon remplace "/CCM/" par "/ccmfr/" (case insensitive) URL=URL.replace( new RegExp( "/CCM/", "i" ), "/ccmfr/" ); //redirige go(); }
Existe t'il un composant qui pourrai avoir le meme comportement que les alert box mais en restant non visible à l'utilisateur?

10/03/2009, 17h57
Bovino

Code:

if(xhr.readyState == 4 && xhr.status == 404)

Dans la mesure où la page n'existe pas dans ce cas, le xhr.readyState (c'est-à-dire : les données ont été transmises) ne risque pas d'être vrai puisqu'il n'y a pas de données !

Code:

if(xhr.status == 404)

Pas mieux :(
Même en procédant de la façon suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function go(){
  var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
      window.location=(URL);      
    }else{
      window.location = ("http://www.google.com");
    }
  }
	xhr.open("GET","Home.aspx",true); 
	xhr.send(null);
}

Je suis toujours rediriger vers Google même si ma page existe
:mur:

11/03/2009, 06h49
Bovino

Euh... oui, c'est un peu normal, ta fonction est lancée sur l'événement onreadystatechange, donc quand le readyState passe à 1, 2, 3 puis 4. Donc la première fois, le if est faux, on passe dans le else !
Tente avec else if
11/03/2009, 19h42
keskidi

Pourquoi ne pas utiliser apache tout simplement avec ErrorDocument 404 ?
11/03/2009, 19h51
Anthonyyy

Parce que le tout roule sous SharePoint et je n'ai aucun accès sur IIS.

Citation:

Envoyé par Bovino

Euh... oui, c'est un peu normal, ta fonction est lancée sur l'événement onreadystatechange, donc quand le readyState passe à 1, 2, 3 puis 4. Donc la première fois, le if est faux, on passe dans le else !
Tente avec else if

OK mais dans le else if je pas quoi comme argument?
readyState != 4, statuts != 200 ...
J'avoue ne pas trouver lequel choisir, j'ai essayé pas mal de valeur.
Curieusement quand on a la fonction suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function go(){
  var xhr = getXhr()
// On dfini ce qu'on va faire quand on aura la rponse
  xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
      translate();
      alert(xhr.responseText);
    }
  }
	xhr.open("GET","home.aspx",true);
	xhr.send(null);
}

Tout marche très bien.
Si je rajoute un else ou else if comme suis ça par en cacahuète

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function go(){
  var xhr = getXhr()
// On dfini ce qu'on va faire quand on aura la rponse
  xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
      translate();
      alert(xhr.responseText);
    } else if(xhr.readyState == 4 && xhr.status == 404) {
      alert("404");// (ou redirection)
    }
  }
	xhr.open("GET","home.aspx",true);
	xhr.send(null);
}

Pourquoi? 8O
De même en modifiant de la manière suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function go(){
  translate();
  var xhr = getXhr()
// On dfini ce qu'on va faire quand on aura la rponse
  xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reu et que le serveur est ok
    if(xhr.status == 200){
      alert(xhr.responseText);
    } else  if(xhr.status == 404){
      window.location = "http://www.google.com"
      // alert("404");
    }
  }
	xhr.open("GET","home.aspx",true);
	xhr.send(null);
}

ou encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function go(){
  translate();
  var xhr = getXhr()
// On dfini ce qu'on va faire quand on aura la rponse
  xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reu et que le serveur est ok
    if(xhr.status == 200){
      alert(xhr.responseText);
    } else  {
      alert("404");
    }
  }
	xhr.open("GET","home.aspx",true);
	xhr.send(null);
}

Mes maigres conaissances en prog ne me permettent pas de faire mieux pour le moment :pleure:

:resolu: :yaisse2:
dans la fonction go(), la ligne suivante posait problème:

Code:

xhr.open("GET","Home.aspx",true);

La requête est toujours envoyée à la page home.aspx, et la page existe !! (C'est la page d'accueil)
Comme expliqué ici :merci: Bovino
En passant la variable URL à la place de home.aspx, on effectue un test sur l'existence ou non de cette dernière.

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
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
 
<html>
	<head>
		<title>Traduction - Translation</title>
		<script type='text/JavaScript'>
 
// http://siddh.developpez.com/articles/ajax/
 
// Recupere l'URL au complet de la page précédente
var URL = document.referrer;
//Cherche différentes valeurs dans l'URL
var PosFR = URL.indexOf("/FR/");
var PosPI = URL.indexOf("?");
 
// REDIRECTION SI ADRESSE URL NON VALIDE (2 CAS)
 
// (1) REQUETE (REDIRECTION)
 
// Si le site est en franais (Si l'URL contient "/FR/")
if (PosFR != -1){
//Si l'URL contient "?" (une requte)
  if (PosPI != -1){
    alert ("Contenu non traduisible");
    URL = "http://www.google.com";
//redirige
    window.location=(URL);
  }
}
// Si le site est en anglais (Si l'URL contient "/EN/")
if (PosFR == -1){
//Si l'URL contient "?" (une requte)
  if (PosPI != -1){
    alert ("Non translatable content");
    URL = "http://www.google.com";
// Redirige
    window.location=(URL);
  }
}
// (2) 404 (REDIRECTION)
 
// Création de l'objet XmlHttpRequest
function getXhr(){
  var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}	else { // XMLHttpRequest non support par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
    return xhr
}
 
//TRADUCTION
 
function ChangeURL(){
// Si l'URL contient "/FR/"
  if (PosFR != -1){
// Remplace "/FR/" par "/EN/" (case insensitive)
    URL=URL.replace( new RegExp( "/FR/", "i" ), "/EN/" );
  }else{
// Sinon remplace "/EN/" par "/FR/" (case insensitive)
    URL=URL.replace( new RegExp( "/EN/", "i" ), "/FR/" );
  }
}	
 
// Méthode qui sera appelé au chargement de la page (balise body)
function go(){
  ChangeURL();
  var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
  xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.status == 404){
      window.location = "http://www.google.com";
    }
    if(xhr.readyState == 4 && xhr.status == 200){
      window.location=(URL);
    }
  }
	xhr.open("GET",URL,true);
	xhr.send(null);
}
    </script>
  </head>
	<body onload='go()'>
	</body>
</html>

La page me génère des erreurs (petit triangle jaune en bas à gauche du navigateur) lors de l'execution du script. Est ce qu'il existe une methode de "rangement du code" (les fonctions avec les fonctions, les variables avec les variables...