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

标签 javascript html 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>

/locales/manifest.json

{
  "locales": [ "en-US", "fr-FR"],
  "default_locale": "en-US",
  "resources": [
    "{{locale}}/strings.l20n",
  ]
}

/locales/en-US/strings.l20n

<name "Search by name - EN">
<instructions "Enter one or more names - EN">

/locales/fr-FR/strings.l20n

<name "Search by name - FR">
<instructions "Enter one or more names - FR">

如何将英语(即 /locales/en/strings.l20n 文件)换成法语?尽管在 index.html 中指示了 lang="fr-FR",它仍呈现 en-US。

最佳答案

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

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

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

document.l10n.requestLanguages(['fr']);

如果您想提供一段 UI 让您的用户更改应用程序的语言,这将非常有用。例如,您可以使用支持所有语言的下拉菜单,这些语言 document.l10n.requeSTLanguages 选择新选项时。

关于javascript - 如何使用 l20n.js 指示在浏览器中呈现哪种语言?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24665292/

相关文章:

css - 相对 Div 内 P 内容的绝对 Div 不会溢出

java - 在数据流 2.x 中将 TableRow 转换为 JSON 格式字符串的最简单方法?

javascript - 检索 JSON 会引发错误 : Unexpected token :

javascript - 方括号表示法(不是指对象访问!)

javascript - 从数据库中获取最新5条数据

jquery - 我们可以根据屏幕宽度更改 CSS 属性宽度吗?

html - IE。 11 在 html5/bootstrap 中破坏 flex

json - 我可以使用基于 noSQL 文档来存储 json 对象吗?

javascript - 未捕获的安全错误 : Failed to execute 'getImageData' on 'CanvasRenderingContext2D' : The canvas has been tainted by cross-origin data

javascript - 如何防止 "this"被事件处理程序反弹