我没有开发任何包含客户端和后端服务器端的Web 服务应用程序（如 java EE 应用程序或 Ruby on Rails）。
相反，我只是在开发一个 HTML网站页面，在这个页面上，有两个标志图像（美国和中国），用作用户页面的语言选择。
我想知道，对于这个单一的网页开发（没有任何后端系统），是否有任何有效的方法可以根据用户的标志选择来实现页面本地化（即以不同的语言显示页面）？
在我的情况下，如何本地化一个简单的 HTML 网站页面？
IT技术
javascript
jquery
html
2021-03-08 19:33:40
6个回答
您可以使用标准的 HTMLlang属性：
<span lang="en">Scale</span><span lang="de">Maßstab</span>
然后你可以隐藏和显示匹配的元素：
function select_language(language) {
$("[lang]").each(function () {
if ($(this).attr("lang") == language)
$(this).show();
else
$(this).hide();
});
}
我使用一个简单的选择：
<select onchange="select_language(this.options[this.selectedIndex].value)">
<option value="en" selected>English</option>
<option value="de">Deutsch</option>
</select>
现在我会在没有 jQuery 的情况下做到这一点。首先，我会隐藏所有具有lang属性的节点并仅显示默认语言。这可以在 CSS 中完成：
[lang] {
display: none;
}
[lang=en] {
display: unset;
}
如果没有启用 JavaScript，文档不会本地化，但至少可以用默认语言读取。
接下来我将使用一些 JavaScript 来显示正确的语言，如果它在支持的语言列表中。
function localize (language)
{
if (['de'].includes(language)) {
let lang = ':lang(' + language + ')';
let hide = '[lang]:not(' + lang + ')';
document.querySelectorAll(hide).forEach(function (node) {
node.style.display = 'none';
});
let show = '[lang]' + lang;
document.querySelectorAll(show).forEach(function (node) {
node.style.display = 'unset';
});
}
}
您可以使用选择框或浏览器语言。
localize(window.navigator.language);
这是解决此问题的一种方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Localise</title>
</head>
<body>
<a href="#china" onclick="showthis('contentchina')">China flag</a>|
<a href="#usa" onclick="showthis('contentusa')">USA flag</a>
<div id="contentchina" style="display:none">
Lorem ipsum dolor sit amet...
</div>
<div id="contentusa" style="display:none">
Duis aute irure dolor...
</div>
<script>
function showthis(nation) {
document.getElementById(nation).style.display = "block";
return false;
}
</script>
</body>
</html>
您可以使用 JavaScript 来读取用户语言并显示正确的标志/内容：
HTML：
<img id="myFlag" src="flag_default.png"/>
和一些 jQuery（因为你用 jQuery 标记了你的问题）：
var supportedLangs = ['de', 'en', 'cn'];
var userLang = navigator.language;
if($.inArray(userLang, supportedLangs) >= 0){
$('myFlag').attr('src', 'flag_' + userLang + '.png');
}
其它你可能感兴趣的问题