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

How do I indicate which language to render in the browser using l20n.js?

本文关键字：语言 浏览器 l20n 何使用 js 指示      更新时间：2023-09-26

我正在使用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>
<标题>/地区/manifest.json h1> 地区/en - us/strings.l20n h1> 地区/- fr/strings.l20n h1> 何将英语(即/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属性，这是一个已知的错误。如果你想用这种方式测试，你需要下载并安装一个法语版的Chrome。

另一种选择是使用L20n API并显式地更改语言:

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

如果你想提供一个UI来让你的用户改变应用程序的语言，这是有用的。例如，你可以有一个下拉菜单，你支持的所有语言，当一个新的选项被选中时调用document.l10n.requestLanguages。

使用L20n JavaScript API requestlocale ()

/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">
  <script type="text/javascript">
    $('#langSwitch-en').click(function() {
      document.l10n.requestLocales('en-US');
    });
    $('#langSwitch-fr').click(function() {
      document.l10n.requestLocales('fr-FR');
    });
  </script>
</head>
<body>
<!-- fix the correct language code [-de] for [-fr] -->
  <a id="langSwitch-en" href="#">en</a> / <a id="langSwitch-fr" href="#">fr</a>
  <h2 data-l10n-id="name"></h2>
  <p data-l10n-id="instructions"></p>
</body>
</html>
相关文章：