根據瀏覽器語言顯示特定的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或內容？

回答

相關問題