HTML页面多语言切换

最新推荐文章于 2024-05-15 13:09:23 发布

windywater119

最新推荐文章于 2024-05-15 13:09:23 发布

阅读量3.7w

点赞数 6

分类专栏： HTML

本文链接：https://blog.csdn.net/dowithsmiles/article/details/8562590

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

部门有个Web UI产品，里面有项功能是语言切换。之前同事的做法是把每个页面都做另做一份，语言切换时改变URL即可。简单的页面还好，如果遇到更多语言和复杂页面难免会增加维护难度。后来另一个同事用jQuery+AJAX+json+cookie的方式加以改进，我学习了一下代码，做了个自己的版本。

首先，页面不需要复制多个语言版本了，我们为每个需要翻译的文本标签加上一个自定义的lang属性，如<div lang>login</div>、<input type=”button” value=”apply” lang>，不用为它赋值。一个HTML页面示例如下：

<!doctype html>
<head>
<meta charset="utf-8">
<title>translation test</title>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</head>

<body>
	<div>
		<a href="#" id="enBtn">English</a>
		<a href="#" id="zhBtn">简体中文</a>
	</div>
	<div><a lang>click here:</a></div>
	<div><input type="button" value="apply" lang id="applyBtn"></div>
</body>

</html>

假如要实现英文和中文两种版本，可以在网页文件的同级目录下分别添加一个en.json和zh.json文件：

en.json

{
	"click here:" : "Please click here:",
	"apply" : "Apply!",
	"a translation test!" : "A Translation test!!"
}

zh.json

{
	"click here:" : "点击这里",
	"apply" : "应用",
	"a translation test!" : "翻译示例！"
}

接着，为这个页面添加以下js脚本：

var dict = {};

$(function() {
	registerWords();
	setLanguage("en");
	
	$("#enBtn").bind("click", function() {
		setLanguage("en");
	});
	
	$("#zhBtn").bind("click", function() {
		setLanguage("zh");
	});
	
	$("#applyBtn").bind("click", function() {
		alert(__tr("a translation test!"));
	});
});

function setLanguage(lang) {
	setCookie("lang=" + lang + "; path=/;");
	translate();
}

function getCookieVal(name) {
	var items = document.cookie.split(";");
	for (var i in items) {
		var cookie = $.trim(items[i]);
		var eqIdx = cookie.indexOf("=");
		var key = cookie.substring(0, eqIdx);
		if (name == $.trim(key)) {
			return $.trim(cookie.substring(eqIdx+1));
		}
	}
	return null;
}

function setCookie(cookie) {
	document.cookie = cookie;
}

function translate() {
	loadDict();
	
	$("[lang]").each(function() {
		switch (this.tagName.toLowerCase()) {
			case "input":
				$(this).val( __tr($(this).attr("lang")) );
				break;
			default:
				$(this).text( __tr($(this).attr("lang")) );
		}
	});
}

function __tr(src) {
	return (dict[src] || src);
}

function loadDict() {
	var lang = (getCookieVal("lang") || "en");

	$.ajax({
		async: false,
		type: "GET",
		url: lang + ".json",
		success: function(msg) {
			dict = eval("(" + msg + ")");
		}
	});
}

function registerWords() {
	$("[lang]").each(function() {
		switch (this.tagName.toLowerCase()) {
			case "input":
				$(this).attr("lang", $(this).val());
				break;
			default:
				$(this).attr("lang", $(this).text());
		}
	});
}

可以看到，js代码中的语言翻译用__tr()解决。若要动态切换语言，调用setLanguage()方法。

注意，页面加载完成后首先要统计翻译词条registerWords()，它会把每个待翻译标签里的文本记录到lang属性中，这个方法调用一次即可。

如果学过Qt，就会知道里面的语言包机制：每个词条可以指定一个context，这个单词一直被人蹩脚地翻译成“上下文”，我觉得这里解释为“名空间”更好，为解决一个单词或句子在不同地方产生不同翻译的问题。我还没有做到这一点，考虑到这种情况比较少见，并可加以避免，就偷个懒啦。

这就是我实现的思路，当然改进的地方还有不少，比如cookie的读写，语言包和页面文件的如何对应等等。在HTML上我只是个新手，就当抛块引玉了。

windywater119

关注

6
点赞
踩
40

收藏

觉得还不错? 一键收藏
4
评论
HTML页面多语言切换

部门有个Web UI产品，里面有项功能是语言切换。之前同事的做法是把每个页面都做另做一份，语言切换时改变URL即可。简单的页面还好，如果遇到更多语言和复杂页面难免会增加维护难度。后来另一个同事用jQuery+AJAX+json+cookie的方式加以改进，我学习了一下代码，做了个自己的版本。首先，页面不需要复制多个语言版本了，我们为每个需要翻译的文本标签加上一个自定义的lang属性，如lo
复制链接

扫一扫