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

我正在创建一个非常简单的网站，可能有4页，我想用英文，法文和葡萄牙文提供。根据浏览器语言显示特定的div或内容？

有没有一种方法，与JavaScript，检测浏览器语言，然后只显示某些对应于他们的语言的div？

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

来源

2011-02-13 Scott Chandler

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

来源

2011-02-13 01:09:26 user268396

我对上述内容的理解是，只有在`body`标签上明确设置了`lang`时，才会有效。我不觉得这是由浏览器自动设置的吗？ – 2011-02-13 01:27:19

开始与此：

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，但你的想法。

来源

2011-02-13 01:25:43

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

如果你真的想这样做，用JavaScript在客户端上，那么你应该：

设置lang attribute每一块的内容（或包装`S）。
抓住从navigator.languages，navigator.language，或navigator.userLanguage语言（检查所有这些，languages是最新的，language应该是无处不在，userLanguage是AFAIK对老年人的IE）和手上有合适的默认以防万一。
然后显示lang与语言匹配的所有内容，并隐藏lang不匹配的所有内容。

举例来说，如果你有这样的HTML：

<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>

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

$(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(); 
});

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

如果您将显示/隐藏逻辑保存在一个需要语言参数的单独函数中，那么这将非常容易还提供某种语言选择小部件。

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

感谢coliff为navigator.languages更新，最近的Chrome版本似乎需要。

来源

2011-02-13 02:57:37

此解决方案似乎不再适用于Chrome。它在Opera和Firefox中仍然有效。如果你能看一看，看看你能不能修好，那会很棒。 :-) – coliff 2016-10-20 12:12:34

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

回答

相关问题