实现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)

	}

}

２可以将页面中的文字用<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>

４ 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. Amazon的AWS账单看起来不是很方便

    发了一个PDF格式的收据,只写了收取的费用,EC2下面的明细没有. DetailAmazon Simple Notification Service $0.00Charges $0.00Estimat ...

  2. ZOJ3768 夹逼查找【STL__lower_bound()_的应用】

    首先学习一下lower_bound() 函数lower_bound()在first和last中的前闭后开区间进行二分查找,返回大于或等于val的第一个元素位置.如果所有元素都小于val,则返回last ...

  3. 【C# -- OpenCV】Emgu CV 第一个实例

    原文 [C# -- OpenCV]Emgu CV 第一个实例 Emgu CV下载地址 http://sourceforge.net/projects/emgucv/files/ 找最新的下就行了,傻瓜 ...

  4. [思路]为什么要做一个Web服务器

    对于.net开发者而言,提到Web服务器最容易想到的就是IIS了. IIS功能强大,配置繁多,但不免对普通用户而言过于复杂,另外在云时代的今天,同时维护多个IIS或远程维护IIS还是有诸多不便的,有很 ...

  5. BZOJ 1257: [CQOI2007]余数之和sum( 数论 )

    n >= k 部分对答案的贡献为 k * (n - k) n < k 部分贡献为 ∑ (k - ⌊k / i⌋ * i)  = ∑  , ⌊k / i⌋ 相等的数是连续的一段, 此时这段连 ...

  6. Java中Timer和TimerTask的使用

    转自:http://www.cdtarena.com/javapx/201306/8893.html java.util.Timer定时器,实际上是个线程,定时调度所拥有的TimerTasks. 一个 ...

  7. React.js学习

    React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...

  8. SqlServer数据库存储过程的使用

    搞开发这么久了,说实话很少用到存储过程,大部分代码都在业务层给处理了. 今天在做APP接口的时候,表里面没有数据,需要模拟一些数据,于是就想到存储过程,来一起用下吧. SqlServer中创建存储过程 ...

  9. spring+mybatis利用interceptor(plugin)兑现数据库读写分离

    使用spring的动态路由实现数据库负载均衡 系统中存在的多台服务器是"地位相当"的,不过,同一时间他们都处于活动(Active)状态,处于负载均衡等因素考虑,数据访问请求需要在这 ...

  10. Ural1109_Conference(二分图最大匹配/匈牙利算法/网络最大流)

    解题报告 二分图第一题. 题目描写叙述: 为了參加即将召开的会议,A国派出M位代表,B国派出N位代表,(N,M<=1000) 会议召开前,选出K队代表,每对代表必须一个是A国的,一个是B国的; ...