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

时间:2016-02-11 05:52:37

标签: javascript html

我正在创建一个网站,我想支持两种语言,英语和法语。

到目前为止,我正在使用此问题的顶级解决方案: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();
    });
}

小提琴:https://jsfiddle.net/NBenitus/7ypmo7q1/1/(在小提琴中,在选择字段中选择一种语言不会改变语言。但这在我的网站上有效。)

我的问题是,当页面第一次加载时,默认情况下会显示两种语言的元素。

提前致谢!

1 个答案:

答案 0 :(得分:0)

如果可能,您可以检查当前的浏览器语言(通过window.navigator.language并在DOMContentLoaded上相应地设置)。一个简化的例子如下:

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