Question

我正在创建一个可能只有4页的非常简单的网站，我想要提供英语，法语和葡萄牙语。

有没有办法用javascript检测浏览器语言，然后只显示与其语言对应的某些div？

例如，如果他们的语言是法语，而不是显示<div id="footer_en">，那么它会使用<div id="footer_fr">吗？

Answer 1

通常的方法是将语言分开（例如，每种语言一个HTML文件），然后以他们想要的语言发回内容。您可以尝试解析Accept-Language header并发回最接近的匹配项;你可能想要包含某种语言选择小部件。

如果您真的想在使用JavaScript的客户端上执行此操作，那么您应该：

在每个内容（或包装器）上设置lang attribute。
从navigator.languages，navigator.language或navigator.userLanguage抓取语言（全部检查，languages是最新的，language应该是无处不在，{对于较旧的IE，{1}}是AFAIK）并且具有适当的默认值以防万一。
然后展示userLanguage与语言匹配的所有内容，并隐藏lang不匹配的所有内容。

例如，如果你有这个HTML：

lang

然后是一些JavaScript（我将使用jQuery作为我的武器选择）：

<div lang="en" class="wrapper">
    <h1>English</h1>
    <p>Here is some English content.</p>
</div>
<div lang="fr" class="wrapper" style="display: none;">
    <h1>Française</h1>
    <p>Voici le contenu en français.</p>
</div>
<div lang="pt" class="wrapper" style="display: none;">
    <h1>Português</h1>
    <p>Aqui você encontra o conteúdo Português.</p>
</div>

以下是一个实例：http://jsfiddle.net/ambiguous/kwcfL67a/

如果将show / hide逻辑保留在一个带有语言参数的单独函数中，那么提供某种语言选择窗口小部件也很容易。

如果使用JavaScript工具更容易使用该类语言，您也可以使用该类，但保留$(document).ready(function() { var known = { en: true, fr: true, pt: true }; var lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2); if(!known[lang]) lang = 'en'; // Find all <div>s with a class of "wrapper" and lang attribute equal to `lang` // and make them visibile. $('div.wrapper[lang=' + lang + ']').show(); // Find all <div>s with a class of "wrapper" and lang attribute not equal // to `lang` and make them invisibile. $('div.wrapper[lang!=' + lang + ']').hide(); });属性是个好主意。

感谢lang更新了最新版本的Chrome似乎需要的navigator.languages。

Answer 2

从这开始：

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
userLang = substr(1,2);

然后设置<body class="userLang">，我留给您，因为我不想假设您使用的是特定的JavaScript库或框架。接下来，您可以使用CSS来显示，隐藏或执行您想要的div。例如，如果fr是您的默认值：

#footer_fr { display: block; }
#footer_pt { display: none; }
#footer_en { display: none; }
body.pt #footer_en { display: none; }
body.pt #footer_fr { display: none; }
body.pt #footer_pt { display: block; }

我不确定上面是完美的CSS，但你明白了。

Answer 3

结合CSS：lang（）选择器：http://www.w3.org/TR/CSS2/selector.html#lang（从不明白它是CSS2 rec而不是CSS3，：lang（）选择器保持不变）动态加载CSS或DOM操作。

根据浏览器语言显示特定的div或内容？

3 个答案: