用于检测浏览器语言首选项的JavaScript

Question

我一直在尝试使用JavaScript检测浏览器语言首选项.

如果我在IE中设置浏览器语言Tools>Internet Options>General>Languages,如何使用JavaScript读取此值？

Firefox的问题相同.我无法检测到tools>options>content>languages使用的设置navigator.language.

使用时 navigator.userLanguage ,它会检测通过Start>ControlPanel>RegionalandLanguageOptions>Regional Options选项卡完成的设置 .

我曾与测试navigator.browserLanguage,并navigator.systemLanguage但没有返回第一个设置的值(Tools>InternetOptions>General>Languages)

我找到了一个详细讨论这个问题的链接,但问题仍然没有答案:(

Answer 1

我认为这里的主要问题是浏览器设置实际上并不影响navigator.language通过javascript获得的属性.

他们做了什么影响是HTTP"接受语言"头,但现在看来这个值不可通过JavaScript的.(也许就是为什么@anddoutoi规定他不能为它找到一个参考,不涉及服务器端).

我已经编写了一个解决办法:我敲了在谷歌应用程序引擎的脚本http://ajaxhttpheaders.appspot.com将通过JSONP回报你的HTTP请求头.

(注:这只是如果你没有可用的后端,可以为你做这个使用一个黑客一般来说,你不应该让第三方呼叫服务器是在你的页面的JavaScript文件,除非你有一个非常高的.对主持人的信任程度.)

我打算永久保留它,所以请随意在你的代码中使用它.

这里有一些示例代码(在jQuery中),供您如何使用它

$.ajax({ 
    url: "http://ajaxhttpheaders.appspot.com", 
    dataType: 'jsonp', 
    success: function(headers) {
        language = headers['Accept-Language'];
        nowDoSomethingWithIt(language);
    }
});

希望有人觉得这很有用.

编辑:我在github上编写了一个小jQuery插件,它包含了这个功能:https://github.com/dansingerman/jQuery-Browser-Language

编辑2:这里要求的是在AppEngine上运行的代码(超级琐碎):

class MainPage(webapp.RequestHandler):
    def get(self):
        headers = self.request.headers
        callback = self.request.get('callback')

        if callback:
          self.response.headers['Content-Type'] = 'application/javascript'
          self.response.out.write(callback + "(")
          self.response.out.write(headers)
          self.response.out.write(")")
        else:
          self.response.headers['Content-Type'] = 'text/plain'
          self.response.out.write("I need a callback=")

application = webapp.WSGIApplication(
                                     [('/', MainPage)],
                                     debug=False)

def main():
    run_wsgi_app(application)

if __name__ == "__main__":
    main()

EDIT3:有开在这里采购的应用程序引擎代码:https://github.com/dansingerman/app-engine-headers

Answer 2

var language = window.navigator.userLanguage || window.navigator.language;
alert(language); //works IE/SAFARI/CHROME/FF

window.navigator.userLanguage仅限IE,它是Windows控制面板中设置的语言- 区域选项而非浏览器语言,但您可以假设使用设置为France的Window Regional设置的计算机的用户可能是法国用户.

navigator.language 是FireFox和所有其他浏览器.

一些语言代码:'it'= italy,'en-US'= english US等.

正如rcoup和WebMacheter在下面的评论中所指出的,当用户在IE以外的浏览器中查看网站时,这种解决方法不会让您区分英语方言.

window.navigator.language(Chrome/FF/Safari)总是返回浏览器语言,而不是浏览器的首选语言,但是:"英语使用者(gb,au,nz等)使用en-us版本的Firefox/Chrome/Safari非常常见." 因此即使用户首选语言window.navigator.language仍然会返回.en-USen-GB

Answer 3

2014年更新.

现在有一种方法可以使用navigator.languages在Firefox和Chrome中获取Accept-Languages (适用于Chrome> = 32和Firefox> = 32)

此外,Firefox中的navigator.language反映了最受欢迎的内容语言,而不是UI的语言.但由于这个概念尚未被其他浏览器支持,因此它不是很有用.

因此,要尽可能获得最首选的内容语言,并使用UI语言作为后备:

navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)

Answer 4

我在Angular Translate模块中遇到了这段代码来检测浏览器的语言,你可以在这里找到源代码.我通过将angular.isArray替换为Array.isArray来略微修改代码,使其独立于Angular库.

var getFirstBrowserLanguage = function () {
    var nav = window.navigator,
    browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
    i,
    language;

    // support for HTML 5.1 "navigator.languages"
    if (Array.isArray(nav.languages)) {
      for (i = 0; i < nav.languages.length; i++) {
        language = nav.languages[i];
        if (language && language.length) {
          return language;
        }
      }
    }

    // support for other well known properties in browsers
    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
      language = nav[browserLanguagePropertyKeys[i]];
      if (language && language.length) {
        return language;
      }
    }

    return null;
  };

console.log(getFirstBrowserLanguage());

Answer 5

var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
               navigator.language ||   // All browsers
               navigator.userLanguage; // IE <= 10

console.log(language);

• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages
• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language

试试PWA模板https://github.com/StartPolymer/progressive-web-app-template

Answer 6

<script type="text/javascript">
var lang = window.navigator.languages ? window.navigator.languages[0] : null;
    lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
if (lang.indexOf('-') !== -1)
    lang = lang.split('-')[0];

if (lang.indexOf('_') !== -1)
    lang = lang.split('_')[0];
</script>

我只需要主要组件来满足我的需求,但您可以轻松地使用完整的字符串.适用于最新的Chrome,Firefox,Safari和IE10 +.

Answer 7

navigator.userLanguage 对于IE

window.navigator.language 用于firefox/opera/safari

Answer 8

没有合适的方法来获得该设置,至少不是浏览器独立的东西.

但服务器具有该信息,因为它是HTTP请求标头的一部分(Accept-Language字段,请参阅http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4)

因此,唯一可靠的方法是从服务器获得答案.您需要在服务器上运行的东西(如.asp,.jsp,.php,CGI),并且"thing"可以返回该信息.这里有很好的例子:http://www.developershome.com/wap/detection/detection.asp？page = readHeader

Answer 9

我一直在使用Hamid的答案,但是在语言数组就像["en","en-GB","en-US","fr-FR","fr","en -ZA"]当"en-GB"更好匹配时,它将返回"en".

我的更新(下面)将返回第一个长格式代码,例如"en-GB",否则它将返回第一个短代码,例如"en",否则它将返回null.

function getFirstBrowserLanguage() {
        var nav = window.navigator,
            browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
            i,
            language,
            len,
            shortLanguage = null;

        // support for HTML 5.1 "navigator.languages"
        if (Array.isArray(nav.languages)) {
            for (i = 0; i < nav.languages.length; i++) {
                language = nav.languages[i];
                len = language.length;
                if (!shortLanguage && len) {
                    shortLanguage = language;
                }
                if (language && len>2) {
                    return language;
                }
            }
        }

        // support for other well known properties in browsers
        for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
            language = nav[browserLanguagePropertyKeys[i]];
            len = language.length;
            if (!shortLanguage && len) {
                shortLanguage = language;
            }
            if (language && len > 2) {
                return language;
            }
        }

        return shortLanguage;
    }

console.log(getFirstBrowserLanguage());

Answer 10

我想分享我的代码，因为它有效并且与其他给出的答案不同。在此示例中，如果您说法语（法国、比利时或其他法语），您将被重定向到法语页面，否则将重定向到英语页面，具体取决于浏览器配置：

<script type="text/javascript">
$(document).ready(function () {
    var userLang = navigator.language || navigator.userLanguage;
    if (userLang.startsWith("fr")) {
            window.location.href = '../fr/index.html';
    }
    else {
            window.location.href = '../en/index.html';
    }
});
</script>

Answer 11

我刚想出来了.它结合了较新的JS解构语法和一些标准操作来检索语言和语言环境.

var [lang, locale] = (((navigator.userLanguage || navigator.language).replace('-', '_')).toLowerCase()).split('_');

希望它可以帮助某人

Answer 12

我找不到一个引用,声明可以不涉及服务器端.

MSDN上:

• 航海家.浏览器语言
• 航海家.SYSTEMLANGUAGE
• 航海家.使用者语言

来自browserLanguage:

在Microsoft Internet Explorer 4.0及更早版本中,browserLanguage属性反映了已安装浏览器的用户界面的语言.例如,如果在英文操作系统上安装日语版的Windows Internet Explorer,则browserLanguage将为ja.

但是,在Internet Explorer 5及更高版本中,无论安装的Internet Explorer语言版本如何,browserLanguage属性都会反映操作系统的语言.但是,如果安装了Microsoft Windows 2000 MultiLanguage版本,则browserLanguage属性将指示操作系统当前菜单和对话框中设置的语言,如"控制面板"的"区域选项"中所示.例如,如果在英语(英国)操作系统上安装日语版的Internet Explorer 5,则browserLanguage将为en-gb.如果您安装Windows 2000 MultiLanguage版本并将菜单和对话框的语言设置为法语,则即使您有日语版的Internet Explorer,browserLanguage也会为fr.

注意此属性不指示用户在"Internet选项"对话框中的"语言首选项"中设置的语言.

此外,它似乎browserLanguage已被弃用,因为IE8没有列出它

Answer 13

Javascript方式:

var language = window.navigator.userLanguage || window.navigator.language;//returns value like 'en-us'

如果您使用的是jQuery.i18n插件,则可以使用:

jQuery.i18n.browserLang();//returns value like '"en-US"'

Answer 14

如果您正在开发Chrome应用/扩展程序,请使用chrome.i18n API.

chrome.i18n.getAcceptLanguages(function(languages) {
  console.log(languages);
  // ["en-AU", "en", "en-US"]
});

Answer 15

我遇到了同样的问题,我编写了以下前端库,它包含了多个浏览器的代码.代码不多,但不必在多个网站上复制和粘贴相同的代码.

得到它:acceptedlanguages.js

用它:

<script src="acceptedlanguages.js"></script>
<script type="text/javascript">
  console.log('Accepted Languages:  ' + acceptedlanguages.accepted);
</script>

它总是返回一个数组,按用户首选项排序.在Safari和IE中,数组总是单一长度.在FF和Chrome中,它可能不止一种语言.

Answer 16

DanSingerman对这个问题有很好的解决方案.

该语言唯一可靠的来源是HTTP请求标头.因此,您需要一个服务器端脚本来回复请求标头或至少Accept-Language回复您的字段.

这是一个非常简单的Node.js服务器,它应该与DanSingermans jQuery插件兼容.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(JSON.stringify(req.headers));
}).listen(80,'0.0.0.0');

Answer 17

对于它的价值,维基媒体的通用语言选择器库有这样做的钩子:https://www.mediawiki.org/wiki/Extension :UniversalLanguageSelector

请参阅resources/js/ext.uls.init.js中的函数getFrequentLanguageList.直接链接:https://gerrit.wikimedia.org/r/gitweb？p = mediawiki/extensions/UniversalLanguageSelector.git; a = blob; f = resources/js / ext.uls.init.js; hb = HEAD

它仍然取决于服务器,或者更具体地说,取决于MediaWiki API.我展示它的原因是它可以提供一个很好的例子来获取有关用户语言的所有有用信息:浏览器语言,接受语言,地理定位(从CLDR获取国家/语言信息),当然,用户自己的网站首选项.

Answer 18

如果您只需要支持某些现代浏览器,那么您现在可以使用:

navigator.languages

它以用户指定的顺序返回用户语言首选项的数组.

截至目前(2014年9月),这适用于:Chrome(v37),Firefox(v32)和Opera(v24)

但不是:IE(v11)