實現web多語言的一種解決辦法

來源:互聯網
上載者:User

實現web多語言可能有多種解決辦法,現在分享一種比較簡單的思路,這篇文章主要用於記錄學習過程,肯定存在不少謬誤,歡迎批評指正。

web多語言實現最簡單的一種方法可能是每一種語言一套代碼,但這樣存在一個問題就是維護起來十分不方便。

所以最好是把資料(語言文字)從代碼中分離出來,然後共用一套代碼,這樣維護起來方便。

下面介紹的一種辦法是用XML儲存資料,用javascript 來解析XML,將資料動態產生到HTML中。

1 登入頁面:主要用來切換語言,當選擇英文登入後,整個介面就顯示為英文,在此的一個主要問題是,要用一個變數做為全域變數

用於標識當前選擇了哪種語言,但是地這個變數可能只局限於當前頁面,那如何將這個變數傳給其它頁面呢?這裡用的是cookie,當然也可以用其它方法。

當在登入頁面選擇英文時,此時將變數設定到cookie中,在其它頁面載入時,首先去cookie中取這個變數,檢查這個變數的值,如果是英文,則顯示英文。

var lantagfunction getCookie(c_name){if (document.cookie.length>0)  {  c_start=document.cookie.indexOf(c_name + "=")  if (c_start!=-1)    {     c_start=c_start + c_name.length+1     c_end=document.cookie.indexOf(";",c_start)    if (c_end==-1) c_end=document.cookie.length    return unescape(document.cookie.substring(c_start,c_end))    }   }return ""}function setCookie(c_name,value,expiredays){var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())}function checkCookie(){lantag =getCookie('lantag')if (lantag ==null ||lantag ==""){    setCookie('lantag','zh',365)}}

 

2可以將頁面中的文字用<span id="ti"></span>標籤代替,然後用JS 將HTML中相應的內容,用XML中相應的內容替換.

普通文字:

document.getElementById("ti").innerHTML=xmlDoc.getElementsByTagName("ti")[0].childNodes[0].nodeValue

button:

document.getElementById("login").value=xmlDoc.getElementsByTagName("login")[0].childNodes[0].nodeValue;

var lantag var tagfunction changetag(tag){ setCookie('lantag',tag,365) login_language();  }function login_language(){var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";lantag=getCookie('lantag');if(lantag =='zh'){xmlDoc.load("zh.xml");document.getElementById("ti").innerHTML=xmlDoc.getElementsByTagName("ti")[0].childNodes[0].nodeValue;document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;document.getElementById("pwd").innerHTML=xmlDoc.getElementsByTagName("pwd")[0].childNodes[0].nodeValue;document.getElementById("login").value=xmlDoc.getElementsByTagName("login")[0].childNodes[0].nodeValue;}else if(lantag=='en'){ xmlDoc.load("en.xml"); document.getElementById("ti").innerHTML=xmlDoc.getElementsByTagName("ti")[0].childNodes[0].nodeValue;document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;document.getElementById("pwd").innerHTML=xmlDoc.getElementsByTagName("pwd")[0].childNodes[0].nodeValue;document.getElementById("login").value=xmlDoc.getElementsByTagName("login")[0].childNodes[0].nodeValue;}}}

3 Index 頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="cookie.js"></script><script type="text/javascript" src="lan.js"></script><title>login</title></head><body onload="focus_text();checkCookie();login_language()"><div align="right"><a href="javascript:changetag('zh')">中文</a>|<a href="javascript:changetag('en')">English</a></div><table width="800" height="100"  border=0 align="center"></table><table width="404" height="284"  border=0 align="center"background="./image/Load_background.png" ><form id="form1" name="form1" method="post" action=""><tr height ="40"></tr><tr height ="40"><td colspan="3"align="center"><span id="ti"></span></td></tr><tr height ="40"><td width ="40"  ></td><td width ="80" align="left" ><span id="to"></span></td><td align="left"><input name="input_name" type="text" id="input_name" value="" style="width:180px;height:18px" maxlength="24" /></td></tr><tr height ="40"><td width ="40"></td><td width ="80" align="left" ><span id="pwd"></span></td><td align="left"><input name="input_pass" type="password" id="input_pass" style="width:180px;height:18px" maxlength="24"/></td></tr><tr height ="40"><td  colspan="3" align="center"><input name="login" type="button" id="login" onclick="validate()" style="font-size:14px;" value="" width:45px; height:19px;/></td></tr><tr ></tr></form></table><br> </body></html>

 

4 XML可以這樣設定

<?xml version="1.0" encoding='gb2312'?><en><log_in><ti>Decoder</ti><to>UserName:</to><pwd>Password:</pwd><login>Login</login></log_in>
</en>

 

 

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.