There may be multiple solutions for implementing Web multi-language. Now we share a simple idea. This article is mainly used to record the learning process, and there must be many mistakes. You are welcome to criticize and correct them.
One of the simplest ways to implement web multi-language implementations may be a set of code in each language, but the problem is that maintenance is inconvenient.
Therefore, it is best to separate the data (Language and text) from the code and then share a set of code to facilitate maintenance.
One of the methods described below is to store data in XML, parse XML using JavaScript, and dynamically generate data into HTML.
1. logon page: it is mainly used to switch the language. After English logon is selected, the entire interface is displayed in English. A major problem here is to use a variable as the global variable.
It is used to identify the language selected currently, but the local variable may be limited to the current page. How can I pass this variable to other pages? Cookie is used here, and other methods can be used.
When selecting English on the logon page, set the variable to Cookie. When loading on other pages, first retrieve the variable from Cookie and check the value of the variable, english is displayed.
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. Replace the text in the page with the <span id = "ti"> </span> label, and then use js to replace the corresponding content in HTML with the corresponding content in XML.
Common text:
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 page
<! 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">
4. XML can be set in this way.
<?xml version="1.0" encoding='gb2312'?><en><log_in><ti>Decoder</ti><to>UserName:</to><pwd>Password:</pwd><login>Login</login></log_in><／en>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
