碼上快樂

相關內容    簡體    繁體

關於在靜態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刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        現有 Vue.js 項目快速實現多語言切換的一種思路  
        實現iOS中的多語言切換  
        Html | 基於Bootstrap實現導航欄切換  
        AutoCAD 2014中切換語言  
        html靜態頁面實現微信分享思路  
        SourceTree切換語言  
        App內切換語言  
        vue中實現動態切換不同的值  
        jquery實現前端多語言切換  
        Android app應用多語言切換功能實現  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM