zoukankan      html  css  js  c++  java
  • 实现web多语言的一种解决办法

    实现web多语言可能有多种解决办法,现在分享一种比较简单的思路,这篇文章主要用于记录学习过程,肯定存在不少谬误,欢迎批评指正。

    web多语言实现最简单的一种方法可能是每一种语言一套代码,但这样存在一个问题就是维护起来十分不方便。

    所以最好是把数据(语言文字)从代码中分离出来,然后共用一套代码,这样维护起来方便。

    下面介绍的一种办法是用XML存储数据,用javascript 来解析XML,将数据动态的生成到HTML中。

    1 登录页面:主要用来切换语言,当选择英文登录后,整个界面就显示为英文,在此的一个主要问题是,要用一个变量做为全局变量

    用于标识当前选择了哪种语言,但是地这个变量可能只局限于当前页面,那如何将这个变量传给其它页面呢?这里用的是cookie,当然也可以用其它方法。

    当在登录页面选择英文时,此时将变量设置到cookie中,在其它页面加载时,首先去cookie中取这个变量,检查这个变量的值,如果是英文,则显示英文。

    var lantag
    function 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 tag
    function 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="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="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="" 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>


     


     

  • 相关阅读:
    jQuery实现复选框全选、全不选、反选问题解析
    春节回来后至今的工作汇总
    后台管理的权限
    谨记:新增逻辑和编辑逻辑的相同和不同
    html5的本地数据库
    php做api接口的一些随笔
    js setTimeout
    在jquery选中器中使用变量
    jQuery ajax用get方法传递给api数组
    关键词处理,表格内容分类处理
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3148121.html
Copyright © 2011-2022 走看看