在项目中只用到了三种语言：英文、中文简体、中文繁体。所以我首先想到了最笨的方法：1.直接将三种语言写在html中，显示当前设置的语言隐藏其它两种来实现。2.使用css伪元素的content:attr(en)形式，将语言写在元素属性中，这种也是一种笨方法。3.前两种由于自己觉得不够完美不适合更多语言的情况，所以又想到了一种更方便一点的方法，原理与第2种类似。

实现

说明：以下所代码自己测试在firefox新版本和ie8中有效，如果自己测试兼容性不好，请网友们自己改一下代码吧

文档目录

languagetest/

├───test.html

├───zh.css

└───en.css

原理

三种方法都是通过加载对应语言的css来实现，一般在vc或其它程序嵌套浏览器内核中使用不了cookie来存放当前设置的语言（我同事那个不行，他是通过读取注册表来设置的），读取当前设置的语言部分在本文中不体现。

第一种

代码如下test.html：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script>
  5. //创建一个link来引入控制语言的css
  6. function languageLink (type) {
  7. var link = document.createElement('link');
  8. link.id = "lang";
  9. link.type = "text/css";
  10. link.rel = "stylesheet";
  11. link.href = type+".css";
  12. link.langType = type;
  13. return link;
  14. }
  15. //根据语言类型切换
  16. function changeLang(type){
  17. var defaultLang = "zh";
  18. if(type) defaultLang= type;
  19. var link = document.getElementById('lang');
  20. if(link) {
  21. if(link.langType == defaultLang) return;
  22. link.parentNode.removeChild(link);
  23. }
  24. var head = document.getElementsByTagName('head');
  25. head[0].appendChild(languageLink(defaultLang));
  26. }
  27. //文档加载到这里时加载默认语言
  28. +function () {
  29. changeLang();
  30. }();
  31. //toggle 两种语言切换
  32. function changeLanguage (){
  33. var link = document.getElementById('lang');
  34. var currentLangType = 'zh';
  35. if(link){
  36. var langtype = link.langType;
  37. switch(langtype){
  38. case 'zh': currentLangType = 'en';break;
  39. case 'en': currentLangType = 'zh';break;
  40. }
  41. }
  42. changeLang(currentLangType);
  43. }
  44. </script>
  45. </head>
  46. <body>
  47. <button onclick="changeLanguage()">切换</button>
  48. <button onclick="changeLang('en')">英文</button>
  49. <button onclick="changeLang('zh')">中文</button>
  50. <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>

  1. <!-- 第二种方法 利用伪元素显示属性法-->
  2. <h2>另一种方法 显示隐藏元素法  该方法比较合适，麻烦一点点</h2>
  3. <div><span class="language-zh">我是中文</span><span class="language-en"> i am English</span></div>
  4. <div><span class="language-zh">我是中文111</span><span class="language-en"> i am English111</span></div>
  5. <br/>
  6. <br/>
  7. <br/>
  8. <h2>两种方法都是通过切换css实现</h2>
  9. </body>
  10. </html>


zh.css：




  1. <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);}




  1. /* 隐藏英文 */




.language-en{display:none;}




en.css：




  1. /* 显示lang-en属性内容 */
    2. 

  2. .language:before{
    3. 

  3. content:attr(lang-en);
    4. 

  4. }
    5. 

  5. /* 隐藏中文 */
    6. 

  6. .language-zh{
    7. 

  7. display:none;
    8. 

  8. }




第二种方法


代码同上（第一种方法）


第三种方法


下面就介绍第三种方法


由于上面两种方法都是把语言写在html中，这样不容易维护和实现更多种语言，其实我们可以将语言包定义为css文件，通过切换css来实现不同语言的展现。下面看一下代码片段:


test.html


下面是一个展示姓名和地址表单的列表




  1. <table>
    2. 

  2. <tr>
    3. 

  3. <td><label for="name"><span class="language-name"></span></label></td>
    4. 

  4. <pre class="html" name="code">        <td><label for="address"><span class="language-address"></span></label></td>






  1. </tr>






  1. <tr>
    2. 

  2. <td><input type="text" id="name" name="name"/></td>
    3. 

  3. <td><input type="text" id="address" name="address"/></td>
    4. 

  4. </tr>




</table>





zh.css




  1. .language-name:before{
    2. 

  2. content:"名称";
    3. 

  3. }
    4. 

  4. .language-address:before{
    5. 

  5. content:"地址";
    6. 

  6. }




en.css




  1. .language-name:before{
    2. 

  2. content:"name";
    3. 

  3. }
    4. 

  4. .language-address:before{
    5. 

  5. content:"address";
    6. 

  6. }




原理不多说了，就是css引用的切换。至于css的伪元素有不太明白的自行查询一下吧。


 


 


 


 


 




前端开发中的多语言切换，可使用js动态替换内容


1、在用户点击切换语言后，把选择的语言版本保存在cookie中


//写入cookie函数

function setCookie(name,value)

{

    var Days = 30;

    var exp = new Date();

    exp.setTime(exp.getTime() + Days*24*60*60*1000);

    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

//获取cookie

function getCookie(name)

{

    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

    return unescape(arr[2]);

    else

    return null;

}

//setCookie('lan','hk');    繁体中文

//setCookie('lan','cn');    简体中文

//setCookie('lan','en');    英文




2、在包含静态文本的标签中，添加一个属性：set-lan=”html:name” 
属性值中的html代表内容的位置，name代表要替换的文字的标识 
例如：


<span set-lan="html:name">名字</span>

<input type="text" value="名字" set-lan="val:name" />

这些就需要前端工程师在开发过程中添加进去，并且，要切换语言文字的外面都必须要有一个标签包裹，否则无法进行切换；

如：

<span set-lan="html:name"><i class="icon"></i>名字</span>

这样的代码，是无法把“名字”替换成“Name”的，会把“名字”前面的i标签也一起替换掉，如果不想把i标签也替换掉，就要在“名字”外面添加一个标签，改成：

<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>




3、定义3个语言的标识+内容的json字符串


var cn = {

            "name" : "姓名",

            "tel" : "电话",

            "email" : "邮箱",

        };

var hk = {

            "name" : "姓名",

            "tel" : "電話",

            "email" : "郵箱",

        };

var en = {

            "name" : "Name",

            "tel" : "Tel",

            "email" : "Email",

        };




4、遍历带set-lan属性的标签，进行文本替换


$('[set-lan]').each(function(){

    var me = $(this);

    var a = me.attr('set-lan').split(':');

    var p = a[0];   //文字放置位置

    var m = a[1];   //文字的标识

    //用户选择语言后保存在cookie中，这里读取cookie中的语言版本

    var lan = getCookie('lan');

    //选取语言文字

    switch(lan){

        case 'cn':

            var t = cn[m];  //这里cn[m]中的cn是上面定义的json字符串的变量名，m是json中的键，用此方式读取到json中的值

            break;

        case 'en':

            var t = en[m];

            break;

        default:

            var t = hk[m];

    }

    //如果所选语言的json中没有此内容就选取其他语言显示

    if(t==undefined) t = cn[m];

    if(t==undefined) t = en[m];

    if(t==undefined) t = hk[m];

    if(t==undefined) return true;   //如果还是没有就跳出

    //文字放置位置有（html,val等，可以自己添加）

    switch(p){

        case 'html':

            me.html(t);

            break;

        case 'val':

        case 'value':

            me.val(t);

            break;

        default:

            me.html(t);

    }

});




以上是html中的文字替换，但是写在js中的文字怎么办？ 
可以定义一个函数，来读取


function get_lan(m)

{

    //获取文字

    var lan = getCookie('lan');     //语言版本

    //选取语言文字

    switch(lan){

        case 'cn':

            var t = cn[m];

            break;

        case 'hk':

            var t = hk[m];

            break;

        default:

            var t = en[m];

    }

    //如果所选语言的json中没有此内容就选取其他语言显示

    if(t==undefined) t = cn[m];

    if(t==undefined) t = en[m];

    if(t==undefined) t = hk[m];

    if(t==undefined) t = m; //如果还是没有就返回他的标识

    return t;

}






 




那么在js中使用的文字就只要用此函数来读取就可以了 
如


alert('姓名');

改成

alert(get_lan('name'));




												


											
关于在静态html中实现语言切换的思路与实现的更多相关文章
	

    
								
  1. react中多语言切换的实现方式
		
    目前正在进行的项目就是一个多语言切换的项目,有些前情知识我们可以 从https://react.i18next.com/getting-started进行了解. 说到使用方法,当然首先是要$ npm  ...
    
		
    2. 
						
  2. Android app应用多语言切换功能实现
		
    最近在做一个多语言切换的功能,类似于微信的语言切换,搜了下资料基本上都是以下这种: 1. 实现的效果 和微信类似,在设置界面打开切换语言的界面,选择语言后重启 HomeActivity,语言切换完成, ...
    
		
    3. 
						
  3. 在SOUI中使用动态多语言切换
		
    动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...
    
		
    4. 
						
  4. vue-i18n vue-cli项目中实现国际化 多语言切换功能 一
		
    vue-cli项目中引入vue-i18n 安装: npm install vue-i18n可参考vue-i18n官网文档 main.js中引入: import Vue from 'vue' impor ...
    
		
    5. 
						
  5. 动态语言切换(续)-designer中的retranslateUi（带源码）
		
    本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息.原文链接.原文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途. 谢谢合作.原文链接:动态语言切换(续)-designer中 ...
    
		
    6. 
						
  6. vue 双语言切换中，data内翻译文字不正常切换的解决方案
		
    背景 有这么一个登录页面,相关功能如下: 支持双语言,点击切换语言 表单内部有一个自定义的select,里面option的label.value都是的名字由外部提供:其中预设的option的label ...
    
		
    7. 
						
  7. Android 应用内多语言切换
		
    最近公司的 App 里需要用到多语言切换,简单来说,就是如果用户没有选择语言选项时,App 默认跟随系统语言,如果用户在 App 内进行了语言设置,那么就使用用户设置的语言.当然,你会发现,App 的 ...
    
		
    8. 
						
  8. 在使用Qt5.8完成程序动态语言切换时遇到的问题
		
    因为之前了解过一些Qt国际化的东西,所以在写程序的时候需要显示给用户的字符都使用了 tr(" ")的形式,然后使用 Qt Linguist得到相应的 qm(Qt message)文 ...
    
		
    9. 
						
  9. 史上最简单的springboot国际化多语言切换实现方案
		
    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 前提: 在resources目录下建立 messages_en_US.properti ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C++自己用模板减少工作量
			
    今天写代码,遇到这样一个类似如下的需求: auto componentClassSavedByPLC = std::make_shared<ComponentClassSavedByPLC> ...
    
			
    2. 
						
  2. linux nload命令简介及安装方法
			
    第一步:nload命令简介 nload 命令用于查看linux网络流量状况,实时输出.可以理解为是一个控制台应用程序,用来实时监测网络流量和带宽使用情况的命令. 使用可视化的界面显示流入和留出系统的网 ...
    
			
    3. 
						
  3. C++ 系列：Boost Thread 编程指南
			
    转载自:http://www.cppblog.com/shaker/archive/2011/11/30/33583.html 作者: dozbC++ Boost Thread 编程指南0 前言1 创 ...
    
			
    4. 
						
  4. layui相关用法总结
			
    1.关闭当前弹出层 parent.layer.close(parent.layer.getFrameIndex(window.name));
    
			
    5. 
						
  5. JOIN方法也是连贯操作方法之一
			
    JOIN方法也是连贯操作方法之一,用于根据两个或多个表中的列之间的关系,从这些表中查询数据. 大理石平台规格 join通常有下面几种类型,不同类型的join操作会影响返回的数据结果. INNER JO ...
    
			
    6. 
						
  6. SpringBoot学习笔记（六）：SpringBoot实现Shiro登录控制和权限控制
			
    登录模块:在登录时必须调用 授权模块:不是一登录就调动,而是当角色权限控制时才会调用 登录控制 环境搭建在上一篇. 数据库表 表名:role 字段:id rolename 表名:user 字段:id  ...
    
			
    7. 
						
  7. pycharm优化
			
    一.版本选择 建议安装5.0版本,因为好注册,这个你懂得. 下载地址: https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Re ...
    
			
    8. 
						
  8. python3-常用模块之re
			
    正则表达式 定义: 正则表达式是对字符串操作的一种逻辑公式,用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 是一种独立的规 ...
    
			
    9. 
						
  9. Java程序员面试题收集（1）
			
    一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪 ...
    
			
    10. 
						
  10. Nmap扫描原理（下）
			
    转自:https://blog.csdn.net/qq_34398519/article/details/89055999 3     Nmap高级用法 3.1    防火墙/IDS规避 防火墙与ID ...
    
			
    11.