采用jscript实现无刷新网页多语言选择

[b][color=Red]本代码适用于开发多语言体系的后台管理界面
转载请著名版权[/color][/b]

核心代码
language.js

[code]
//LanguageManager 多语言体系管理
//Author:  tony
//EMAIL: tonyhl[AT]126.com

var LanguageManager = new Object();

//配置选项
// 默认语言
LanguageManager.DefaultLanguage = "zh-cn";
//语言js文件所在路径
LanguageManager.Basepath='';
//语言标签名称
LanguageManager.Tagname='icbs_lang';
//客户端选择语言的cookies名称
LanguageManager.Cookiename="icbs_language";
//语言选择导航条ID
LanguageManager.Nav = "languagemanager_langnav";
//已有的语言清单,key必须为语言文件JS文件名称
LanguageManager.AvailableLanguages =
{
        'en'                : 'English',
        'zh-cn'                : 'Chinese Simplified'
}

LanguageManager.GetCookie=function()
{
        var arr = document.cookie.match(new RegExp("(^| )"+this.Cookiename+"=([^;]*)(;|$)"));
        if(arr !=null)
        {
                return unescape(arr[2])
        }
                return '';
}
LanguageManager.SetCookie=function(sValue){
        var dExpire = new Date();
        dExpire.setTime(dExpire.getTime()+parseInt(365*24*60*60*1000));
        document.cookie = this.Cookiename + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString();
}

LanguageManager.GetActiveLanguage = function()
{
        var sUserLang ;
        sUserLang = this.GetCookie();
        if (sUserLang == "")
        {
                if (navigator.userLanguage)
                        {sUserLang = navigator.userLanguage.toLowerCase();}
                else
                {
                        if (navigator.language)
                                {sUserLang = navigator.language.toLowerCase();}
                        else
                                {sUserLang = this.DefaultLanguage;}
                }
                if (sUserLang.length >= 5)
                {
                        sUserLang = sUserLang.substr(0,5);
                        if(this.AvailableLanguages[sUserLang])
                        {
                                this.SetCookie(sUserLang);
                                return sUserLang;
                        }
                }
                if (sUserLang.length >= 2)
                {
                        sUserLang = sUserLang.substr(0,2);
                        if(this.AvailableLanguages[sUserLang])
                        {
                                this.SetCookie(sUserLang);
                                return sUserLang;
                        }
                }
                this.SetCookie(sUserLang);
                return sUserLang;
        }
        else
        {
                return sUserLang;
        }
}
LanguageManager.ActiveLanguage = new Object() ;
LanguageManager.ActiveLanguage.Code = LanguageManager.GetActiveLanguage() ;
LanguageManager.ActiveLanguage.Name = LanguageManager.AvailableLanguages[LanguageManager.ActiveLanguage.Code] ;

LanguageManager.TranslateElements = function( targetDocument, tag, propertyToSet )
{
        var e = targetDocument.getElementsByTagName(tag) ;
        for ( var i = 0 ; i < e.length ; i++ )
        {
                var sKey = e[i].getAttribute( this.Tagname ) ;
                if ( sKey )
                {
                        var s = this.LangData[ sKey ] ;
                        if ( s )
                                eval( 'e[i].' + propertyToSet + ' = s' ) ;
                }
        }
}

LanguageManager.TranslatePage = function( targetDocument )
{
        this.TranslateElements( targetDocument, 'INPUT', 'value' ) ;
        this.TranslateElements( targetDocument, 'SPAN', 'innerHTML' ) ;
        this.TranslateElements( targetDocument, 'LABEL', 'innerHTML' ) ;
        this.TranslateElements( targetDocument, 'OPTION', 'innerHTML' ) ;
}

LanguageManager.AddScript = function(){
        var scripts = document.getElementsByTagName("script");
        var src = this.Basepath + this.ActiveLanguage.Code + ".js";
        for (var i = 0; i < scripts.length; i++)
        {
      if (scripts[i].src.match(src)) {
          return false;
      }
        }
        document.write("<" + "script src=\"" + src + "\"></" + "script>");
}

LanguageManager.LangNav = function(){
        var str = "<ul>";
        for (key in this.AvailableLanguages)
        {
                if (this.ActiveLanguage.Code == key)
                {
                        str += "<li>" + this.AvailableLanguages[key] + "</li>";
                }
                else
                {
                str += "<li><a href=\"#\" onclick=\"LanguageManager.ChangeLanguage('" + key + "');\">" + this.AvailableLanguages[key] + "</a></li>";
                }               
        }
        document.getElementById(this.Nav).innerHTML = str;
}

LanguageManager.ChangeLanguage = function(lang){
        var scripts = document.getElementsByTagName("script");
        var src = this.Basepath + this.ActiveLanguage.Code + ".js";
        var newsrc = this.Basepath + lang + ".js";
        for (var i = 0; i < scripts.length; i++)
        {
      if (scripts[i].src.match(src)) {
          scripts[i].src = newsrc;
                  break;
      }
        }
        this.SetCookie(lang);
        this.ActiveLanguage.Code = lang;
        this.TranslatePage(document);
        LanguageManager.LangNav();
}

LanguageManager.AddScript();
window.onload=function(){
LanguageManager.TranslatePage(document);
LanguageManager.LangNav();
}
[/code]

语言文件实例
zh-cn.js
[code]
LanguageManager.LangData=
{
home        : "首页",
login_loginid        : "帐号:",
login_loginpwd        : "密码:",
login_checkvalue        : "验证码:",
login_saveid        : "保存登陆帐号",
login_saveboth        : "保存帐号和密码",
login_savenothing         : "从不保存"
}
[/code]

en.js
[code]
LanguageManager.LangData=
{
home        : "Home",
login_loginid        : "ID:",
login_loginpwd        : "Password:",
login_checkvalue        : "CheckValue:",
login_saveid        : "Save my loginID",
login_saveboth        : "Save my loginID and password",
login_savenothing         : "Always ask for my loginID address and password"
}
[/code]

调用实例
sample.html
[code]
<!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>
        <title>Admin Login</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="javascript" type="text/javascript" src="language.js"></script>
</head>
<body>
<h1><span id="languagemanager_langnav"></span></h1>
<a href="../"><span icbs_lang="home">Home page</span></a>
<label for="i0101" icbs_lang="login_loginid">LoginID:</label>
<input type="text" class="input1" maxlength="15" name="loginid" id="i0101" value="" /><br />
<label for="i0102" icbs_lang="login_loginpwd">Password:</label><input type="password" class="input1" maxsize="16" name="loginpwd" id="i0102" /><br />
<input type="submit" class="input2" value="Sign In" icbs_lang="login_signin" /><br />
<input type="radio" name="loginoptions" id="i0103" value="1" />
<label for="i0103" icbs_lang="login_saveid">Save my loginID</label><br />
<input type="radio" name="loginoptions" id="i0104" value="2" />
<label for="i0104"  icbs_lang="login_saveboth">Save my loginID and password</label><br />
<input type="radio" name="loginoptions" id="i0105" value="0" checked />
<label for="i0105" icbs_lang="login_nothing">Always ask for my loginID address and password</label>
</div>
<h2><a href="#">Powered by ICBS</a></h2>
</body>
</html>
[/code]

实例: [url=http://www.goldenleaftool.com.cn/tony/demo/languagemanager]http://www.goldenleaftool.com.cn/tony/demo/languagemanager[/url]

注意事项:
1. 语言清单对象的key必须与语言JS文件名称一致
2. 实际调用的语言文件必须存在,,否则无法转换
3. 语言js文件注意大小,过大会造成页面加载缓慢,这也是为什么只适用于后台管理多语言界面的原因
4. 所有文件采用utf-8格式保存以适应不同语言客户端

扩展:
所有操作通过LanguageManager一个对象完成,这意味着你可以通过增加或修改该对象内容达到自己想要的效果,例如修改语言导航条样式 , 将语言文件分块储存以适应大的语言数据调用从而加快网页加载速度等等

后续开发:
1.依据原理,采用XML储存语言数据,并采用AJAX调用语言数据
2.语言块分步转换功能的实现,以使用网页指定内容语言转换