jQuery的浏览器语言检测

我需要创建一个网页是（客户端只），检测浏览器使用的语言，并显示与该语言相应的类元件和兽皮其他。

英语将是默认语言，因此如果数组中没有任何单元格匹配，则会显示此语言。

我使用navigator.language和navigator.userLanguage（IE）值来检测浏览器当前正在使用哪种语言。

我目前有一些正在进行的代码，但我不确定是否包含所有潜在可能性然后使用数组选择它们的最佳方法。

还有一种语言与一个国家并列的可能性。举例来说，英语作为一个例子有en-us，en-uk等等。我怎么把这个绑在里面？

代码

HTML

<ul class="text"> 
    <li class="en active">English: Some text in english</li> 
    <li class="fr">French: Some text in french</li> 
    <li class="de">German: Some text in german</li> 
    <li class="it">Italian: Some text in italian</li> 
    <li class="ja">Japanese: Some text in japanese</li> 
    <li class="es">Spanish: Some text in spanish</li> 
</ul>

JS（WIP）

var userLang = navigator.language || navigator.userLanguage, 
    countries = ['fr', 'de', 'it', 'ja', 'es'], 
    languagues = ['fr', 'de', 'it', 'ja', 'es']; 

if (userLang === "fr") { 
    $('li').removeClass('active'); 
    $('.fr').addClass('active'); 
}

例

Fiddle

谢谢你的时间。

UPDATE

向客户提供全方位的解决方案，为我工作，并最终帮助未来的用户，我用的HTML相同的布局上面，并用putvande's jQuery solution结合它。

Here is a working example。

注意：此效果会根据为浏览器选择的语言触发更改。至于如何做到这一点谷歌浏览器的例子：

转到设置 - >
向下滚动，然后点击“显示高级设置...” - >
点击“语言和输入法设置...“ - >
然后选择你想要的语言，点击完成并重新启动浏览器。

我希望这有助于。

来源

2013-08-19 Xareyo

不寻常的在客户端完成国际化。大概有需要，而不是服务器端？ – Orbling

@Orbling，不幸的是对于这种情况。 – Xareyo

您是否可以通过AJAX或其他方式获得按需加载的语言集？所有翻译原位都需要按照您的要求完成，这对于某些元素类型会很痛苦。你可以使用'.show（）'而不用担心除选择器以外的任何元素上的活动类。 – Orbling

可以将navigator.language分成两个，并且只使用了第一个参数（语言），并用它来选择具有类li：

var userLang = navigator.language || navigator.userLanguage; 

// Check if the li for the browsers language is available 
// and set active if it is available 
if($('.' + userLang.split('-')[0]).length) { 
    $('li').removeClass('active'); 
    $('.' + userLang.split('-')[0]).addClass('active'); 
}

或者，你也将被改变li根据国家（例如美国和英国英语）？

来源

2013-08-19 15:26:44 putvande

不错的开始..但我建议检查语言是否存在。 –

嗨，谢谢你的工作。 – Xareyo

@GanpaoloDiNino为什么？根据MDN，不应使用navigator.language。它不反映真正的语言环境设置，而是反映旧浏览器版本中使用的浏览器的语言。现在这已经改变了，但出于兼容性的原因，它应该被用作最后一个选项。 – StanE

jQuery的浏览器语言检测

回答

相关问题