实现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="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>

实现web多语言的一种解决办法的更多相关文章

  1. eclipse或tomcat web项目启动失败其中一种解决办法

    失败信息如下: java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to s ...

  2. Unity多单位战斗寻路问题的一种解决办法

    Unity多单位战斗寻路问题的一种解决办法 Unity提供了NavMesh 导航组件   NavMesh是在实践中通用性最好的一种导航方式,但是Unity的实现并没有完全提供一个开放自由的API. 主 ...

  3. 64位Ubuntu运行32位程序时报文件不存在(No such file or Directory)的一种解决办法

    尝试在64位Ubuntu下面运行32位程序时, 一直说 文件不存在(No such file or directory), 我只想说++. 你tm说个文件格式不正确不就好了? 非得说个文件不存在! 真 ...

  4. (转)eclipse安装ADT插件重启后不显示Android SDK Manager和Android Virtual Device Manager图标的一种解决办法

    文章来源:http://blog.csdn.net/zcyhappy1314/article/details/8307534 下面说的这种情况是在正确安装ADT插件的前提下,重启eclipse后,工具 ...

  5. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  6. No Spring WebApplicationInitializer types detected on classpath 问题的一种解决办法

    今天在idea中编译部署工程,tomcat报了这个错误: No Spring WebApplicationInitializer types detected on classpath 导致前端页面访 ...

  7. [Android]Eclipse 安装 ADT[Android Development Tooling] 失败的两种解决办法

    原因 最近想在新装的 Win7 里搭建一下 Android 的开发环境,虽然现在有 Android Studio 了,不过还是习惯 Eclipse 一点.众所周知的原因,Eclipse 直接安装 AD ...

  8. 在win7系统下安装把Ubuntu17.04安装在另一个硬盘开机无法进入Ubuntu问题的一种解决办法。【转】

    本文转载自:http://blog.csdn.net/u012879090/article/details/74937762 在win7系统下安装把Ubuntu17.04安装在另一个硬盘开机无法进入U ...

  9. win10应用程序添加到开机启动项的两种解决办法

    原文 win10应用程序添加到开机启动项的两种解决办法 在windows10系统中,如果想让应用程序在开机之后自动运行起来,可以怎么做呢? 方法一: 1.首先创建应用程序的快捷方式 找到自己想加入开机 ...

随机推荐

  1. BZOJ 3375: [Usaco2004 Mar]Paranoid Cows 发疯的奶牛( set )

    果然写得短就跑得慢... 直接用set就行了(你要写棵平衡树也可以).没有包含的话, 假如L(i) <= L(j), 那么R[i] <= R[j]. 所以从小到大扫, 每次查找左端点小于当 ...

  2. HDU--杭电--1501--Zipper--深搜、DP都好

    Zipper Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  3. sql server 深入使用 总结 part1

    1   OUTPUT  应用场景 : 1.1.对于INSERT,可以引用inserted表以查询新行的属性.         insert into [表名] (a) OUTPUT Inserted. ...

  4. 四、Nginx负载均衡upstream

    user www; worker_processes ; error_log /usr/local/nginx/logs/error.log crit; pid /usr/local/nginx/lo ...

  5. 二、Nginx变量

    $arg_PARAMETER 功能:如果在请求中设置了查询字符串,那么这个变量包含在查询字符串是GET请求PARAMETER中的值. $args 功能:该变量的值是GET请求在请求行中的参数. $bi ...

  6. 分享非常有用的Java程序 (关键代码) (三)---创建ZIP和JAR文件

    原文:分享非常有用的Java程序 (关键代码) (三)---创建ZIP和JAR文件 import java.util.zip.*; import java.io.*; public class Zip ...

  7. php Smarty模板引擎配置与测试

    Smarty简介 smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用PHP程序员同美工分离,使用的程序员改变程序的逻辑内容不会影响到美工的页 ...

  8. linux网络体系架构

    原创kylin_zeng:http://blog.csdn.net/kylin_fire_zeng  本文参考国嵌视频教程,再此感谢国嵌教育. 一.协议栈层次对比: 1)网络接口层把数据链路层和物理层 ...

  9. ※编程随笔※=>☆编程基础☆=>※№ SVN工具自动属性 $Author$ $Date$ $Revision$ $URL$ $Header$替换

    TortoiseSVN设置->常规设置->subversion 配置文件 ->编辑 或者 Windows XP 在 C:\Documents and Settings\Adminis ...

  10. Hashtable的使用

    Hashtable mylist = new Hashtable();             mylist.Add("1", "100");          ...