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

Question

我正在创建一个非常简单的网站，大约有 4 个页面，我希望提供英语、法语和葡萄牙语版本。

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

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

Answer 1

通常的方法是保持语言独立（例如，每种语言一个 HTML 文件）并以他们想要的语言发送回内容。您可以尝试解析Accept-Language 标头并发回最接近的匹配项；您可能还想包含某种语言选择小部件。

\n\n

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

\n\n

\n
• 设置每段内容（或包装器）的lang属性。
\n
• navigator.languages从、navigator.language、 或 中获取语言navigator.userLanguage（检查全部，languages是最新的，language应该无处不在，并且userLanguage对于较旧的 IE 来说是 AFAIK），并手头有一个合适的默认值，以防万一。
\n
• 然后显示与lang该语言匹配的所有内容并隐藏与该语言匹配的所有内容lang不匹配的所有内容。
\n

\n\n

例如，如果您有以下 HTML：

\n\n

<div lang="en" class="wrapper">\n    <h1>English</h1>\n    <p>Here is some English content.</p>\n</div>\n<div lang="fr" class="wrapper" style="display: none;">\n    <h1>Fran\xc3\xa7aise</h1>\n    <p>Voici le contenu en fran\xc3\xa7ais.</p>\n</div>\n<div lang="pt" class="wrapper" style="display: none;">\n    <h1>Portugu\xc3\xaas</h1>\n    <p>Aqui voc\xc3\xaa encontra o conte\xc3\xbado Portugu\xc3\xaas.</p>\n</div>\n

\n\n

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

\n\n

$(document).ready(function() {\n    var known = { en: true, fr: true, pt: true };\n    var lang  = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || \'en\').substr(0, 2);\n    if(!known[lang])\n        lang = \'en\';\n    // Find all <div>s with a class of "wrapper" and lang attribute equal to `lang`\n    // and make them visibile.\n    $(\'div.wrapper[lang=\'  + lang + \']\').show();\n    // Find all <div>s with a class of "wrapper" and lang attribute not equal\n    // to `lang` and make them invisibile.\n    $(\'div.wrapper[lang!=\' + lang + \']\').hide();\n});\n

\n\n

这是一个活生生的例子：http ://jsfiddle.net/ambiguously/kwcfL67a/

\n\n

如果将显示/隐藏逻辑保留在带有语言参数的单独函数中，那么提供某种语言选择小部件也将非常容易。

\n\n

如果使用 JavaScript 工具更容易使用，您也可以使用该语言的类，但保留lang属性是一个好主意。

\n\n\n\n

感谢科利夫的navigator.languages最新版本的 Chrome 似乎需要的更新。

\n