實現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>