HTML页面多语言切换

部门有个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上我只是个新手，就当抛块引玉了。

提醒:好像使用 css lang 标签来是识别，效率更高啊,暂时没有尝试,有兴趣的可以尝试一下.

转自:https://blog.csdn.net/dowithsmiles/article/details/8562590

HTML页面多语言切换相关推荐

vue当前页面中英文语言切换
在开发页面时,比如就一个页面,需要切换语言的元素并不多时,我们就不必从外部引入各种插件,包,直接在项目内实现语言切换,以vue项目为例,下面为具体实现过程写入中英文数据在vue中,把要展示的中英文 ...
微信小程序配置实现中英文国际化语言切换
目录 1,在根目录新建文件夹和js文件 2. 在main.js中设置全局语言状态(默认设置为中文) 3. 页面添加语言切换按钮(登录页面) 4. 在需要显示的页面导入使用 1,在根目录新建文件夹和 ...
微信小程序多语言切换 i18n
1.小程序根目录添加目录i18n 新建 en.js; zh_CN.js 两个文件分别存放英文和中文的对照 en.js const languageMap = {"登录" : &qu ...
qml中loader加载页面会闪屏_Qml动态语言切换
此方法需要在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现重要的事情说三遍首先在工程文件.pro中加入TRANSLATIONS = zh_CN.ts ...
Java Web的Struts2的多语种网站的多语言切换实例
先看图图: 图1: 图2: 图3: 图4: 一首先下载Properties Editor插件,该插件是支持中文的资源文件编辑器:MyEclipse 10.6 以上不用安装该插件,使用自带资源文件编辑 ...
html怎么实现多语言图片切换,JavaScript实现--中英语言切换功能
最近弄的项目是面向国际的,所以老总说要有语言切换功能.第一感觉好像不难吧网上查了下,感觉实现方法就2种: 一:2个版本的HTML.至于怎么切换,方法也很多. 不过这种方法,除了笨,我实在不知道用什么 ...
android 指定语言的资源,Android国际化多语言切换
最近工作中突然要求要项目进行国际化,之前没遇到过.但是也很简单呀,只需要把添加一个相应语言的的strings.xml的资源文件就好了,不是吗?这样只要切换系统语言就能切换app的文字语言了. 但是由此 ...
傲游浏览器语言怎么切换傲游浏览器语言切换方法简述
作为一款多功能.个性化.多标签的浏览器产品,傲游浏览器不仅能够有效减少浏览器对系统资源的占用率,还内置了大量的贴心功能,其中便包括浏览器语言切换.那么,傲游浏览器语言要怎么切换呢?不清楚具体步骤的朋友 ...
ThinkPHP5.0-多语言切换
这两天做得项目中需要多语言切换,于是乎就看了看文档,感觉有些乱,就使用了终极必杀--百度. 借鉴了网上各位大佬所集成.整理出一篇比较适合类似我这种比较菜的随笔吧. 请各位大佬轻虐.感谢. 首先,不说其 ...
项目国际化I18N多语言切换
作为国际化的门户网站,支持多种不同的语言,以方便不同国家,不同语种的用户访问尤其重要,目前通过Vue I18n已实现中英文自由切换. 一.了解I18N 1.什么是I18N i18n(其来源是英文单词 ...

HTML页面多语言切换

HTML页面多语言切换相关推荐

最新文章

热门文章