11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Mon problème est assez simple (je pense) mais je n'ai trouvé la solution nul part. J'ai deux sites bien distinct, l'un en français, l'autre en anglais.
Parfois les anglais tombent sur le site français, et plutôt que de forcer la redirection en fonction de la langue du navigateur, comme ci-dessous, je souhaiterai plutôt (toujours en fonction de la langue du navigateur) afficher un drapeau anglais ou un texte les invitants à cliquer sur un lien. Ce "bloc" serait évidemment caché sur le navigateur français. Quelqu'un aurait-il une idée du bout de code à rajouter ou au moins me mettre sur la voie.

<script type="text/javascript">

if (navigator.browserLanguage)
var language = navigator.browserLanguage; 
else
var language = navigator.language; 

if (language.indexOf('fr') > -1) document.location.href = 'index.html';
else if (language.indexOf('en') > -1) document.location.href = 'indexanglais.html';

else
document.location.href = 'index.html';
</script>


Merci pour votre aide.
Modifié par chrisabsy (16 Oct 2012 - 15:52)
C'est ni plus ni moins que le même système utilisé pour les popup.

Soit tu utilises une solution déjà existante du style fancybox, soit tu créé tout simplement un div avec display:none que tu positionnes comme bon te semble avec un z-index pour l'afficher par dessus ton contenu. Tu peux également ajouter un conteneur à ce div qui prendrait la totalité de la page avec un fond transparent comme c'est le cas sur fancybox.

Tu changeras ensuite le display:none en display:block si ta condition se vérifie. Ceci aura pour effet de faire apparaitre ta boite de dialogue.

Si tu utilises JQuery, tu as cette possibilité : http://jqueryui.com/dialog/
Modifié par Klesk (16 Oct 2012 - 17:24)
Merci Klesk,

J'avais déjà une petite idée de la façon de masquer mon bloc, mon souci est plutôt de mettre en relation la détection du naviguateur anglais avec l'apparition de ce bloc.
Et bien ta fonction existe déjà pour la détection si je ne m'abuse. Donc tu as juste a remplacer document.location.href = 'indexanglais.html'; par l'action que tu souhaite déclencher. Donc dans ton cas l'apparition d'une div.
Merci. Je vais essayez. Mais entre temps j'ai trouvé la solution en php, et du coup je fais une belle économie de caractère.

Pour ceux qui aurais le même problème :

 <?php
	$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
	if ($lang != 'fr')
		$lang = 'en';
	header("Location: $lang/index.php",TRUE,301);
 ?>


Plus un repertoire FR, un autre EN, dans lequel j'ai un index correspondant avec ou sans drapeau... le tout affiché dans une iframe.
Sauf erreur de ma part, il faut éviter au maximum l'usage des iframe car d'un point de vu accessibilité, référencement et respect des normes w3c, ce n'est pas franchement l'idéal.
Ah ?! Merci pour cette précision, je vais me renseigner à ce propos et trouver une alternative le cas échéant.