Choix de page sur base de 'Preferred Language' du navigateur

Version imprimable

13/04/2011, 14h42
Chavadam

Choix de page sur base de 'Preferred Language' du navigateur

Bonjour.

1) J'ai un Internet Service Provider (ISP) qui exige que dans l'espace qu'il me réserve pour uploader mon website, il y ait obligatoirement une page "index.html" (comme unique première page).
2) Je ne veux pas qu'un habitué à mon site doive à chaque entrée à une première page, exécuter le choix "Choisissez votre language".
3) Je souhaite éviter d'utiliser un cookie propre à mon site, du fait que trop de visiteurs n'aiment pas cela et les bloquent même.
4) Mon site web ne comporte que deux pages. En deux langues --> 4 pages. Elles existent. --> Pas d'application cette fois de la technique d'internationalisation.
5) Mon ISP n'offre aucune possibilité de 'Server-side scripting' (JSP-JSTL, PHP, ...)
6) J'ai un peu d'expérience en Javascript, jQuery, Java2SE, JSP-JSTL ... mais pas en ASP, .Net, ...

Je pense à une première page (index.htm) appelant une deuxième une fraction de seconde après être téléchargée, c à d dès que la langue de l'utilisateur a été automatiquement détectée par un code JavaScript.

On se figure que le 'preferred language' est en fait déjà mémorisé ...
- au niveau du navigateur (Mozilla Firefox : Via menu : Tools > Options > Content > Languages)
- pour les pages de Google, dans 'Paramètres de recherche' (Tout en haut, tout à droite)
- au niveau de l'OS de Microsoft.

L'article que j'ai trouvé et qui se rapproche le plus de mon objectif est http://weblogs.asp.net/scottgu/archi...microsoft.aspx. Il m'apprend que :
- La meilleure méthode pour découvrir la langue préférée de l'utilisateur est de trouver la valeur du paramètre 'Accept-Language' du navigateur (Un tag du style fr-BE, nl-BE). 'Accept-Language' est notamment à préférer à 'windows.navigator.browserLanguage' et 'window.navigator.language'.
- "whenever the user requests a page, this language preference is included in the 'Request' in the Accept-Language header."
- "Strangely, you cannot retrieve the value of the Accept-Language header from client JavaScript." Horreur et damnation ! Q1: Est-ce bien vrai (depuis ...) ? Une fonction de base pourtant aussi universellement intéressante !:cry:

Je comprends donc que tout navigateur est à même d'aller puiser la valeur pour le header 'Accept-Language' au moment de composer le 'Request' à envoyer vers le serveur ... mais qu'aucun code JavaScript, jQuery ... d'une page en provenance du serveur n'est capable de faire la même chose, à la différence de mettre la valeur plutôt en variable de JavaScript, et donc indirectement accessible par le code html.
Cela aurait permis que l''href=' contienne l'url d'une page de langue x plutôt que de langue y.

Q2: Où trouver solution à et exemple de ce problème, résolu ?

Merci d'avance.
13/04/2011, 19h21
SpaceFrog

il est stocké ou le preffered language ? mémorisé oui mais dans un cookie ?

si oui à l'ouverture de ta page index un script qui recupère le pl dasn le cookie et fait une redirction ...
15/04/2011, 12h57
Chavadam

Merci pour ta réponse, SpaceFrog.

1) Je demande justement quels sont les nom exact et l'endroit où les navigateurs stockent un(e liste de) tag(s) tel que 'fr-CA' (= preferred language).
2) Je voudrais savoir s'il existe un code JavaScript trouvant un tel tag (ou le premier de la liste) dans tout navigateur et le passant à une variable accessible au niveau html.
Le fait que le mécanisme de création d'un Request existe pour tout navigateur, qui passe un tel tag au paramètre 'Accept-Language', constitue pour moi un espoir que c'est faisable, d'extraire de quelque part le 'preferred language' ...

Tout cela pour éviter d'utiliser un enregistrement en cookie propre à mon site web ...

Et ensuite de baser une redirection vers une des N pages , en fonction de la valeur de ce paramètre JavaScript --> htlm.

Merci d'avance.
15/04/2011, 14h25
Willpower
pour IE, CHROME, SAFARI, OPERA, et tout autres navigateurs dignes de ce nom :
Code:

1 2 3 4 if(navigator.language.substr(0,2)=="fr") window.location.href = "fr-home.htm"; else window.location.href = "en-home.htm";
et pour FIREFOX... ben heu ... :D
15/04/2011, 19h28
NoSmoking

Citation:

Envoyé par Willpower

et pour FIREFOX... ben heu ... :D

navigator.language convient aussi pour FireFox si je ne m'abuse.
16/04/2011, 05h11
Willpower

Citation:

Envoyé par NoSmoking

navigator.language convient aussi pour FireFox si je ne m'abuse.

au temps pour moi :oops:

je teste toujours mes réponses sur ma panoplie de navigateurs avant de les proposer... et j'ignore pourquoi mais tout à l'heure, je n'avais pas langage sous mon firefox. :aie:

Merci WillPower et NoSmoking pour votre réponse. On approche, en effet. Plus que deux "petit" points.

Pt1) Si le 'preferred language' paramétrisé dans le navigateur n'est pas trouvable, cette première page (Index.htm) doit offrir un petit menu permettant de choisir manuellement le language, et donc la page 'Home_<Lang>.htm qui doit suivre. Donc, dans le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
		<script type="text/javascript">
			<!--
			if(navigator.language.substr(0,2)=="fr")
				window.location.href = "Home_Fr.htm";
 
			else if(navigator.language.substr(0,2)=="en")
				window.location.href = "Home_En.htm";
 
			else
				;
			//-->
		</script>
		<meta http-equiv="refresh" content="4; URL=window.location.href">
	</head>

, comment puis-je encoder l'équivalent de <meta http-equiv="refresh" content="4; URL=window.location.href"> ?
Et que coder dans la troisième condition, pour permettre au 'body' de se construire, avec le petit menu de choix de langue ?
Je rêve qu'il y va ici d'une requête intéressant vraiment beaucoup de dévelopeurs web ?

Pt2) La page d'entrée (Index.htm) contient en fait aussi une petite 'auto-hiding pop-up modal window', n'apparaissant que les 5 premières secondes (Tinybox - JavaScript). Comment faire pour que la page Index.htm contenant le menu de choix de language (réglette Apycom - Javascript) se construise et se prépare tandis que l' 'auto-hiding pop-up modal window' apparaît ? Mais je pense que je ferais mieux de poser cette question dans une autre 'discussion' ...

Au cas où le code complet de ma page Index vous serait utile ...:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
		<title>...</title>
		<link rel="stylesheet" media="screen" type="text/css" href="Design.css" title="Design" >
 
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>  <!-- hotlink //-->
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.easing.js"></script>	<!-- for 'menu' //-->
 
		<!-- Tinybox offers a.o.things an auto-hiding pop-up modal window. //-->
		<script type="text/javascript" src="tinybox.js"></script>
 
		<!-- jQuery CSS Drop Down Menu Style Apycom-12 (Black) - Copyright 2007 John Resig //-->
		<link rel="stylesheet" type="text/css" href="Menu_bar/menu.css" >
		<script type="text/javascript" src="Menu_bar/menu.js"></script>
		<script type="text/javascript">	<!-- To initialize the menu. //-->
			<!-- $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700}) }); //-->
			$('.menu').lavaLamp({ fx: "backout", speed: 700});	<!-- Menu_bar/ //-->
		</script>
 
		<!-- Getting the 'preferred language' registered in the browser  //-->
		<script type="text/javascript">
			<!--
			if(navigator.language.substr(0,2)=="fr")
				window.location.href = "Home_Fr.htm";
 
			else if(navigator.language.substr(0,2)=="en")
				window.location.href = "Home_En.htm";
 
			else
				;
			//-->
		</script>
		<meta http-equiv="refresh" content="4; URL=window.location.href">
	</head>
	<body>
		<script language="JavaScript" type="text/javascript" align="absmiddle">
			<!--
			var content = "<img src='images/perscard.jpg' width='640' height='400' hspace='90px' alt='...' />"; // usemap="#m"
			// var content = "<div> <h2 align='center'>...</h2>	<h1 align='center'>...</h1> </div>";
			onload = TINY.box.show(content, 0, 844, 486, 0, 5);
			//-->
		</script>
 
		<div id="wrapper">
			<div id="container_top">
				<div id="header-1">
					...
				</div>
				<div id="subcontainer_top">
					<div id="header-2">
						...
					</div>
				</div>
			</div>
			<!-- <hr noshade /> //-->
			<div id="container_mid">
				<div id="side-left">...</div>
				<div id="subcontainer_mid">
					<div id="content-mid-up">
						<p>Choisissez votre langue - Choose your language</p>
					</div>
					<div id="content-mid-bottom">
						<div id="menu">
							<ul class="menu">
								<li><a href="Home_Fr.htm"><span>Français</span></a></li>
								<li><a href="Home_En.htm"><span>English</span></a></li>
							</ul>
						</div>
					</div>
					<div id="footer">
						...
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Merci beaucoup.

un simple
Code:

1 2 3 4 5 // recuperation de la langue var langue = navigator.language || navigator.userLanguage || 'fr'; langue = langue.substr(0,2); // redirige immediatement window.location.href = 'home_' +langue +'.htm';
devrait suffire pour rediriger l'internaute

Perso je mettrais les différentes pages de langage différent dans des répertoires distincts...

Pour le reste je dois admettre que je n'ai pas tout saisie..!

Hélas non, NoSmoking,

Je dois tenir quelque chose comme
Code:

1 2 3 4 5 6 7 8 9 10 if(navigator.language.substr(0,2)=="fr") Code JavaScript de redirection vers Home_Fr.htm else if(navigator.language.substr(0,2)=="en") Code JavaScript de redirection vers Home_En.htm else // Si ni 'fr', ni 'en', PAS de redirection, mais plutôt // laisser le BODY se construire, comportant le // menu-réglette de choix manuel de l'une des deux langues // (voir <div id="menu"> au BODY) ;
car

Si la langue du navigateur trouvée est différente de celles de mes pages programmées, je ne peux pas laisser effectuer une redirection mais il faut qu'apparaisse le menu de choix manuel de l'une des deux langues prévues.
Comme il y a redirection seulement dans deux cas sur trois, le redirection ne peut pas se situer en HTML après le JavaScript :

Code:

<meta http-equiv="refresh" content="4; URL=window.location.href">

--> Comment coder une redirection dans le if-else en JavaScript.

Merci.

19/04/2011, 12h17
Loceka

Un conseil tout de même : laisse la possibilité à l'utilisateur de changer de langue s'il le désire.

Personnellement ça me gonfle les sites qui me forcent à lire leurs pages dans une langue (qui n'est pas leur langue maternelle) parce que mon navigateur leur dit que je suis français et ne me laissent pas la possibilité de changer la langue du site (petit clin d'oeil à imdb).

Pour ce qui est de la redirection en javascript, ça a déjà été dit plus haut par la plupart des contributeurs :

Code:

window.location.href

simplement...

Code:

1
2
3
4
5
6
7
// recuperation de la langue
var langue = navigator.language || navigator.userLanguage || '';
langue = langue.substr(0,2);
if(( langue == 'fr') || ( langue == 'en')){
  // redirige immediatement
  window.location.href = 'home_' +langue +'.htm';
}

dans le cas contraire la page continuera de se créer...

PS : suit les conseils de Loceka

Merci, Loceka et NoSmoking.

Je cherche à mieux me faire comprendre :
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript">  </script> <meta http-equiv="refresh" content="4; URL=window.location.href">
Message d'erreur lorsque le language du navigateur ne correspond à aucun language mentionné dans le 'if ... ||' :

Citation:

Firefox can't find the file at /C:/Documents and Settings/Chavadam/My Documents/Applic Program/JavaScript/window.location.href.

Rappel: Ce n'est que lorsque le language du navigateur ne correspond à aucun language mentionné dans le 'if ... ||' qu'il faut que la page 'Index.htm' se construise complètement et s'affiche (comportant le menu de choix manuel de langue). Comme j'avais dit précédemment, l'instruction html "<meta ..." ne peut pas être alors exécutée --> Equivalent en JavaScript dans le 'if(' du Script, lorqu'elle doit être exécutée !

J'essaye de ne pas mettre

Code:

else window.location.href = 'Home_fr.htm'; // Default language

, car alors, ma page Index.htm avec le menu de choix de langue ne sera jamais présentée.

Accessoirement : Y aurait-il un moyen de voir la valeur contenue dans 'langue' ?

Loceka,
Souvent, je préfère lire un site dans la langue de son auteur, également. Mais dans mon site, il n'y a que deux langues, toutes deux parentales.
C'est parce que je n'aime pas non plus d'être forcé à lire des pages en Français parce que mon navigateur dit que je suis francophone, par exemple, qu'à tous les 'home_xx.htm' pages (ici 2), le menu contient un choix de langue (sélection manuelle). Mais avec ce subterfuge de détection automatique de language, je délivre quand même pas mal de visiteurs d'avoir à spécifier un language, au cas où le language de préférence de leur navigateur correspond à l'un des mes deux langages d'édition.

Merci.

23/04/2011, 20h44
Bovino

Citation:

Firefox can't find the file at /C:/Documents and Settings/Chavadam/My Documents/Applic Program/JavaScript/window.location.href.

Code:

<meta http-equiv="refresh" content="4; URL=window.location.href">

Tu m'étonnes :roll:
Une balise HTML n'interprète pas le JavaScript...
25/04/2011, 10h41
Chavadam

Bonjour Bovino.
Attention, je n'ai jamais dit qu'une balise HTML interprète le JavaScript ... !

J'ai "simplement" besoin de trouver une instruction équivalente à

Code:

<meta http-equiv="refresh" content="4; URL=window.location.href">

en JavaScript, que je pourrais insérer juste après

Code:

{ window.location.href = 'Home_' +langue +'.htm';

c à d dans '{...} de mon script, car elle ne peut pas être exécutée dans le cas où le 'preferred language' du navigateur serait différent d'une langue figurant dans le 'if(...||...), ce qui se passe bien sûr lorsque l'on fait suivre tout le script par l'instruction html '<meta http-equiv...'.
Dans la fenêtre 'Code:' de mon intervention du 23/04/2011, 16h14, la ligne 10 doit disparaître.

J'ai beau retourner mentalement mes formulations dans mes précédentes parties de cette discussion, je ne vois pas en quoi j'étais ambigu ...
Merci.