实现web多语言的一种解决办法

最新推荐文章于 2023-09-01 23:05:07 发布

gl1987807

最新推荐文章于 2023-09-01 23:05:07 发布

阅读量1.1w

点赞数 4

分类专栏： Web开发

本文链接：https://blog.csdn.net/gl1987807/article/details/9140685

版权

Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现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 οnlοad="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" οnclick="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>

gl1987807

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
实现web多语言的一种解决办法

实现web多语言可能有多种解决办法，现在分享一种比较简单的思路，这篇文章主要用于记录学习过程，肯定存在不少谬误，欢迎批评指正。web多语言实现最简单的一种方法可能是每一种语言一套代码，但这样存在一个问题就是维护起来十分不方便。所以最好是把数据（语言文字）从代码中分离出来，然后共用一套代码，这样维护起来方便。下面介绍的一种办法是用XML存储数据，用javascript 来解析XML，将数
复制链接

扫一扫