如何使用l20n.js指示在浏览器中呈现哪种语言?

ben*_*fee 6 html javascript json localization l20n

我正在使用l20n.js将本地化添加到Angular.js应用程序中.这是我的项目结构:

/index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <script src="jquery-1.11.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">    </script>
  <script src="trackingController.js"></script>
  <script src="l20n.js"></script>
  <link rel="localization" href="locales/manifest.json">
</head>
<body>
  <h2 data-l10n-id="name"></h2>
  <p data-l10n-id="instructions"></p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

/locales/manifest.json

{
  "locales": [ "en-US", "fr-FR"],
  "default_locale": "en-US",
  "resources": [
    "{{locale}}/strings.l20n",
  ]
}
Run Code Online (Sandbox Code Playgroud)

/locales/en-US/strings.l20n

<name "Search by name - EN">
<instructions "Enter one or more names - EN">
Run Code Online (Sandbox Code Playgroud)

/locales/fr-FR/strings.l20n

<name "Search by name - FR">
<instructions "Enter one or more names - FR">
Run Code Online (Sandbox Code Playgroud)

如何换出法语的英语(即/locales/en/strings.l20n文件)?尽管有人表示lang="fr-FR",它仍会呈现en-US index.html.

Sta*_*szy 6

默认情况下,L20n使用浏览器的语言设置来确定要向用户显示的区域设置.我猜你的浏览器在某处的语言设置中有'en'或'en-US'.您可以通过打开开发人员控制台(Firefox中的Ctrl + Shift + K,Chrome中的Ctrl + Shift + J)和键入navigator.language或(在较新版本的Firefox中)来预览您的设置navigator.languages.

在Firefox中,您可以通过进入about:preferences#content,然后单击"语言"下的"选择" 来更改语言首选项.在Chrome中,"设置"中有一个类似的面板,但它实际上并未修改navigator.language属性,这是一个已知错误.如果您想以这种方式进行测试,则需要下载并安装法语版Chrome.

另一种方法是使用L20n API并显式更改语言:

document.l10n.requestLanguages(['fr']);
Run Code Online (Sandbox Code Playgroud)

如果您想提供一个UI来让用户更改应用程序的语言,这非常有用.例如,您可以使用包含所有语言的下拉菜单,document.l10n.requestLanguages在选择新选项时调用.