关于在静态html中实现语言切换的思路与实现
缘由
有一个同事好像是在做vc桌面应用程序，内嵌的浏览器内核来实现界面。在项目中有一个实现多语言的需求，他不太懂前端的知识，自己通过学习实现了通过用js来切换语言，语言是在json中定义的。默认的语言是中文，是直接写在html中的，当切换语言的时候是通过包裹在jquery的document ready里来加载其它语言。这样出现了一个问题，如果页面内容元素多的话可能闪一下，即：先显示一下中文随即就切换了，他们感觉不爽，也影响体验，决定寻求其它的方法。于是不知道通过哪个同事，找到了我。很荣幸让我有机会也学习一下
思路
同事在项目中只用到了三种语言：英文、中文简体、中文繁体。所以我首先想到了最笨的方法：1.直接将三种语言写在html中，显示当前设置的语言隐藏其它两种来实现。2.使用css伪元素的content:attr(en)形式，将语言写在元素属性中，这种也是一种笨方法。3.前两种由于自己觉得不够完美不适合更多语言的情况，所以又想到了一种更方便一点的方法，原理与第2种类似。
实现
说明：以下所代码自己测试在firefox新版本和ie8中有效，如果自己测试兼容性不好，请网友们自己改一下代码吧
文档目录
languagetest/
├───test.html
├───zh.css
└───en.css
原理
三种方法都是通过加载对应语言的css来实现，一般在vc或其它程序嵌套浏览器内核中使用不了cookie来存放当前设置的语言（我同事那个不行，他是通过读取注册表来设置的），读取当前设置的语言部分在本文中不体现。
第一种
代码如下test.html：
<!doctype html>
<html>
<head>
<script>
//创建一个link来引入控制语言的css
function languageLink (type) {
var link = document.createElement("link");
link.id = "lang";
link.type = "text/css";
link.rel = "stylesheet";
link.href = type+".css";
link.langType = type;
return link;
}
//根据语言类型切换
function changeLang(type){
var defaultLang = "zh";
if(type) defaultLang= type;
var link = document.getElementById("lang");
if(link) {
if(link.langType == defaultLang) return;
link.parentNode.removeChild(link);
}
var head = document.getElementsByTagName("head");
head[0].appendChild(languageLink(defaultLang));
}
//文档加载到这里时加载默认语言
+function () {
changeLang();
}();
//toggle 两种语言切换
function changeLanguage (){
var link = document.getElementById("lang");
var currentLangType = "zh";
if(link){
var langtype = link.langType;
switch(langtype){
case "zh": currentLangType = "en";break;
case "en": currentLangType = "zh";break;
}
}
changeLang(currentLangType);
}
</script>
</head>
<body>
<button onclick="changeLanguage()">切换</button>
<button onclick="changeLang("en")">英文</button>
<button onclick="changeLang("zh")">中文</button>
<span style="font-size:14px;"><strong></strong></span><pre name="code" class="html"><!-- 一种方法 显示隐藏元素法--><h2>一种方法 利用伪元素显示属性法 该方法不能选中文字</h2> <div class="language" lang-zh = "这里中文1" lang-en = "here Enlish1"></div> <div class="language" lang-zh = "这里中文2" lang-en = "here Enlish12"></div> <div class="language" lang-zh = "这里中文3" lang-en = "here Enlish13"></div>
<div class="language" lang-zh = "这里中文4" lang-en = "here Enlish14"></div><!-- 第二种方法 利用伪元素显示属性法--> <h2>另一种方法 显示隐藏元素法 该方法比较合适，麻烦一点点</h2> <div><span class="language-zh">我是中文</span><span class="language-en"> i am English</span></div> <div><span class="language-zh">我是中文111</span><span class="language-en"> i am English111</span></div> <br/> <br/> <br/> <h2>两种方法都是通过切换css实现</h2> </body> </html>zh.css：
<span style="font-size:14px;"><strong><span style="font-size:14px;"><strong></strong></span></strong></span><pre name="code" class="css">/* 显示lang-zh属性内容 */.language:before{content:attr(lang-zh);}
/* 隐藏英文 */.language-en{display:none;} en.css：
/* 显示lang-en属性内容 */
.language:before{
content:attr(lang-en);
}
/* 隐藏中文 */
.language-zh{
display:none;
}第二种方法
代码同上（第一种方法）
第三种方法
下面就介绍第三种方法
由于上面两种方法都是把语言写在html中，这样不容易维护和实现更多种语言，其实我们可以将语言包定义为css文件，通过切换css来实现不同语言的展现。下面看一下代码片段:
test.html
下面是一个展示姓名和地址表单的列表
<table>
<tr>
<td><label for="name"><span class="language-name"></span></label></td>
<pre class="html" name="code"> <td><label for="address"><span class="language-address"></span></label></td></tr>
<tr>
<td><input type="text" id="name" name="name"/></td>
<td><input type="text" id="address" name="address"/></td>
</tr></table>
zh.css
.language-name:before{
content:"名称";
}
.language-address:before{
content:"地址";
}en.css
.language-name:before{
content:"name";
}
.language-address:before{
content:"address";
}原理不多说了，就是css引用的切换。至于css的伪元素有不太明白的自行查询一下吧。如果大家有更好的想法欢迎留言讨论。
- 上一篇： java web 项目实现手动中英文切换
- 下一篇： HTML页面多语言切换
