码上快乐

相关内容   简体   繁体

关于在静态html中实现语言切换的思路与实现

本文转载自  查看原文  2018-03-23 16:22  4536    1.HTML

 

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

实现

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

文档目录

languagetest/

├───test.html

├───zh.css

└───en.css

原理

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

第一种

代码如下test.html：

[html]  view plain  copy
 
  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>
[html]  view plain  copy
 
  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.      
  6.    <br/>  
  7.    <br/>  
  8.    <br/>  
  9.    <h2>两种方法都是通过切换css实现</h2>  
  10. </body>  
  11. </html>  

 

 

 zh.css： 
  
 
 
  
 
 
  
 
   
 
    
 
     [css]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  1. <span style="font-size:14px;"><strong><span style="font-size:14px;"><strong></strong></span></strong></span><pre name="code" class="css">/* 显示lang-zh属性内容 */  
    2.  
   
 
  
 .language:before{content:attr(lang-zh);} 
  
 
  
 
   
 
    
 
     [css]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  1. /* 隐藏英文 */  
    2.  
   
 
  
  .language-en{display:none;} 
  
 
 
  
 
 
  
 en.css： 
  
 
 
  
 
 
  
 
   
 
    
 
     [css]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  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. }  
    9.  
   
 
  
 第二种方法 
  
 
 
  
 
 
  
 
 
  
代码同上（第一种方法）
 
  

第三种方法
 
  
下面就介绍第三种方法
 
  
由于上面两种方法都是把语言写在html中，这样不容易维护和实现更多种语言，其实我们可以将语言包定义为css文件，通过切换css来实现不同语言的展现。下面看一下代码片段:
 
  
test.html
 
  
下面是一个展示姓名和地址表单的列表
 
  
 
 
  
 
   
 
    
 
     [html]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  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>  
    5.  
   
 
  
 
  
 
   
 
    
 
     [html]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  1. </tr>  
    2.  
   
 
  
 
  
 
   
 
    
 
     [html]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  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>  
    5.  
   
 
  
 </table> 
  
 
  
 
  
zh.css
 
  
 
 
  
 
   
 
    
 
     [html]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  1. .language-name:before{  
    2.  
    
  2.     content:"名称";  
    3.  
    
  3. }  
    4.  
    
  4. .language-address:before{  
    5.  
    
  5.     content:"地址";  
    6.  
    
  6. }  
    7.  
   
 
  
 en.css 
  
 
 
  
 
   
 
    
 
     [html]  
     view plain 
      copy 
     

         
     
 
    
 
   
 
   
     
    
  1. .language-name:before{  
    2.  
    
  2.     content:"name";  
    3.  
    
  3. }  
    4.  
    
  4. .language-address:before{  
    5.  
    
  5.     content:"address";  
    6.  
    
  6. }  
    7.  
   
 
  
 
  
原理不多说了，就是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'));
 
 
 




					
      
                            
                    

				      

				      

			        

			        				        
					

					

                 

                 
			      
			      

			      
                 
			    

			     
			     

			         

		             

		              
		              
免责声明！

		                 
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

		            
	
		            


                 

			

			
			
			

			  

			   猜您在找
			   
			   
			       
			       
			           
			           
			           
			           
			           html 实现tab切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           现有 Vue.js 项目快速实现多语言切换的一种思路
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           react中多语言切换的实现方式
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           实现iOS中的多语言切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           HTML5实现网页的全屏切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           Html | 基于Bootstrap实现导航栏切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           纯HTML和CSS实现点击切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           HTML5实现滑动切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           纯前端如何实现多语言切换
			           
			       			       
			   
			       
			       
			           
			           
			           
			           
			           uniapp实现多语言切换
			           
			       			       
			   
			   
			   

				

			

			

		

	

    
 

    





	

	

	

		粤ICP备18138465号  © 2018-2025 CODEPRJ.COM