在多语言网站上设置默认语言

Question

I am creating a website and I want to support two languages, English and French.

So far, I am using the top solution from this question: How to localize a simple HTML website page in my case? .

HTML

  <div>
      <select onchange="select_language(this.options[this.selectedIndex].value)">
      <option value="en">EN</option>
      <option value="fr" selected>FR</option>
    </select>
    <h1 lang="fr"> Nous joindre </h1>
    <h1 lang="en"> Contact Us </h1>
    <p lang="fr"> Pour toutes questions, vous pouvez: </p>
    <p lang="en"> If you have any questions, you can :</p>
  </div>

JS

function select_language(language) {
    $("[lang]").each(function () {
        if ($(this).attr("lang") == language)
            $(this).show();
        else
            $(this).hide();
    });
}

Fiddle: https://jsfiddle.net/NBenitus/7ypmo7q1/1/ (in the fiddle, selecting a language in the select field does not change the language. This does work in my web site however.)

My problem is that when the page loads the first time, elements from both languages show by default.

Thanks in advance!

Answer 1

You could check the current browser language if possible (via window.navigator.language and set it accordingly on DOMContentLoaded ). A simplified example would look like:

(function(window, $) {
    var lang = window.navigator.language;
    if (lang != 'en' || lang != 'fr') {
        lang = 'en'; // assuming en as default language
    }
    // now just set the language accordingly by e.g. setting the proper
    // meta tag or whatever
})(window, jQuery);