Question

我需要支持多种语言的应用，我想为用户提供从下拉列表中选择语言的功能。

目前，我正在使用Firefox OS Boilerplate app，我在主屏幕中添加了<select>，如下所示：

<p>
    <label data-l10n-id="language">Language: </label>
    <select id="language">
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
    </select>
</p>

我还在vanilla JS中为它设置了一个简单的事件监听器。

我搜索了MDN文档，但我没有发现任何有关切换语言的内容。

您能否指导我如何以编程方式更改Firefox OS应用程序中的语言？

Answer 1

一种方法是您正在使用的方法，让用户决定应用程序的语言。您可以将用户的选择存储在应用程序中的某个位置（例如localStorage），并在加载页面时检查语言值并采取适当的操作来显示该语言的所有文本。要在不使用外部库的情况下实现此目的，您可以拥有一个包含所有翻译的全局对象：

var translations = new Object();
translations.en = {
    text1: 'The first text',
    text2: 'The second text'
};
translations.es = {
    text1: 'El primer texto',
    text2: 'El segundo texto'
};

您的页面如下所示：

<span data-translate="text1"></span>
<span data-translate="text2"></span>

因此，在加载页面并将用户选择的语言放入变量后（让我们说lang），您迭代所有具有data-translate属性的元素，动态设置内容。

var items = document.querySelectorAll('[data-translate]');
for (var i = 0; i < items.length; ++i) {
    var index = items[i].getAttribute('data-translate');
    items[i].innerHTML = translations[lang][index];
}

另一种方法是使用一个库，该库自动检测用户的语言（来自系统的语言），并用相应的值（存储的）替换页面中的所有可翻译元素（您标记这些）在一个单独的文件中）。例如，选中webL10n。

我相信您可以使用webL10n更轻松地实施第一种方法，您应该检查一下。

如何在Firefox OS应用程序中切换语言？

1 个答案: