web开发(脚本和动态语言) 静态页面 msxml 多国语言

公司的一个项目中，要求使用静态页面实现多国语言，项目已经做完，现总结一下。

只能在微软的操作系统上使用，因为读取xml资源时使用了“微软XML分析程序 Microsoft XML Core

Services(MSXML)”，关于它的介绍可以从网上获得很多信息。

index.html      是首页面，可以选择语言。
main_i18n.html  是利用静态网页实现多国语言的一个例子。

只要为控件指定了i18n的tag，就可以实现控件的多国语言显示。
具体操作在i18n.js中。其中有部分注解。应该可以看的明白。

文档结果如下：

　/*根目录*/
      ├ index.html                    /*首页面*/
　  ├ main_i18n.html          /*主页面*/
  　├ i18n　                          /*资源文件*/
　 │　　└ xml
　 │　　　　 ├eData_EN.xml　/*英文*/
　 │　　　　 ├eData_SC.xml　/*简体中文*/
　  │　　　      └eData_TC.xml　/*繁体中文*/
　  │
  　└ jsfile                          /*脚本语言*/
　　　　└i18n.js　         /*多国语言处理*/

1、index.html    

< html >
< head >
< title > 测试主页面 </ title >
</ head >
< body >
       < form  name ='lanForm'  action ="main_i18n.html"  method ="get"  target ="_blank" >
           < table  border ="0" >
             < tr  align ="left" >
                 < td > 语言： </ td >
                 < td >
                     < SELECT  NAME ="language" >
                         < option  value ="EN" > 英文 </ option >
                         < option  value ="SC" > 中文(简体) </ option >
                         < option  value ="TC" > 中文(繁体) </ option >
                     </ SELECT >
                 </ td >
                 < td >
                     < input  type ="submit"  value ="测试主页面"   />
                 </ td >
             </ tr >
           </ table >
       </ form >
</ body >
</ html >

 

2、main_i18n.html

 

< html >
   < head >
     < script  src ="./jsfile/i18n.js"  type ="text/javascript" ></ script >
   </ head >

< body  onload ="deali18n();" >
  
   < h3 > i18n Test  </ h3 >

   < form  name ='mainForm' >
       < table  border ="0" " >
         < tr >
             < td > button.text :  </ td >
             < td >< input  type ="text"  size ="40"   i18n ="COMMON/A"   /></ td >
         </ tr >
         < tr >
             < td > input.button :  </ td >
             < td >< input  style ="width:230px;"  type ="button"  i18n ="COMMON/B"   /></ td >
         </ tr >
         < tr >
             < td > button :  </ td >
             < td >< button  style ="width:240px;"  i18n ="COMMON/C"   name ="c1"   ></ button ></ td >
         </ tr >
         < tr >
             < td > TEXTAREA :  </ td >
             < td  >< TEXTAREA  i18n ="COMMON/D"  NAME ="d1"  ROWS ="2"  COLS ="40" ></ TEXTAREA ></ td >
         </ tr >
         < tr >
             < td > SELECT :  </ td >
             < td  >
                 < SELECT  id ="selectTxt"  NAME ="selectTxt"  style ="width:230px;"   >
                     < option  id ="id1"  i18n ="COMMON/A"  value ="A" ></ option >
                     < option  id ="id2"  i18n ="COMMON/B"   value ="B" ></ option >
                     < option  id ="id3"  i18n ="COMMON/C"   value ="C" ></ option >
                     < option  id ="id4"  i18n ="COMMON/D"   value ="D" ></ option >
                     < option  id ="id5"  i18n ="COMMON/E"   value ="E" ></ option >
                 </ SELECT >
             </ td >
         </ tr >
         < tr >
             < td > input.checkbox.Label :  </ td >
             < td >< input  type ="checkbox"  value ="a" />< label  i18n ="COMMON/F" /></ td >
         </ tr >
         < tr >
             < td > input.radio.Label :  </ td >
             < td >< input  type ="radio"  value ="b"   />< label  i18n ="COMMON/G" /></ td >
         </ tr >
         < tr >
             < td > label   </ td >
             < td  >< label  i18n ="COMMON/H" ></ label ></ td >
         </ tr >
         < tr >
             < td > SPAN   </ td >
             < td  >< SPAN  i18n ="COMMON/I" ></ SPAN ></ td >
         </ tr >
         < tr >
             < td > HREF   </ td >
             < td  >< A  HREF ="http://www.csdn.net"  target ="_blank"  i18n ="COMMON/LINK" ></ A ></ td >
         </ tr >
         < tr >
             < td > DIV :  </ td >
             < td  >
                 < div  i18n ='COMMON/K'   />
             </ td >
         </ tr >
         < tr >
             < td > DIV not in i18n:  </ td >
             < td  >
                 < div  i18n ="divTestI18nNull" > divTest </ div >
             </ td >
         </ tr >
         < tr >
             < td > DIV havn't i18n:  </ td >
             < td  >
                 < div  > divTest </ div >
             </ td >
         </ tr >
       </ table >
   </ form >
</ body >
</ html >

 

3、i18n.js

 

function  deali18n()  ... {
    //获取url传入的language参数的value
    var lanValue = getParastr("language" , "EN");//默认为英文
    //将页面做i18n处理(根据传入的语言代码)
    getI18nContent(lanValue);

}

//  获取program参数，用户请求页面时传入语言代码，def_lan为默认值
function  getParastr(str_name , def_lan)  ... {
   var hrefstr,pos,parastr,para,tempstr;
   hrefstr = window.location.href;
   pos = hrefstr.indexOf("?")
   parastr = hrefstr.substring(pos+1);
   para = parastr.split("&");
   tempstr="";
   for(i=0;i<para.length;i++) ...{
      tempstr = para[i];
      pos = tempstr.indexOf("=");
      if(tempstr.substring(0,pos) == str_name) ...{
         return tempstr.substring(pos+1);
      }
   }
   return def_lan;//如果没有得到则传回默认值
}


function  getI18nContent(lan)  ... {
    initDoc(lan);
    for(var i=0; i < document.mainForm.all.length; i++) ...{
        var e = document.mainForm.elements[i];
        if (e)
        ...{
            var elementType = e.type;
            var elementId = e.id;
            if (elementType == 'button' || elementType == 'text' || elementType == 'textarea') ...{
                i18nName=(e.i18n);
                if (i18nName)
                ...{
                    e.value = getI18nValue(i18nName);
                }
            } else     if (elementType == 'select-one') ...{                
                for (var j=0; j<e.length; j++)
                ...{
                    i18nName=(e[j].i18n);
                    if (i18nName)
                    ...{
                        e[j].text = getI18nValue(i18nName);
                    }
                }
            } else if (elementType == 'radio' || elementType == 'checkbox') ...{
            //
            }
        } else ...{
            var element = document.mainForm.all(i);
            var tagName = element.tagName;
            //LABEL
            if (tagName == 'LABEL')
            ...{
                i18nName=(element.i18n);
                if (i18nName) ...{
                    element.innerHTML = getI18nValue(i18nName);
                }
            }
            //SPAN
            if (tagName == 'SPAN')
            ...{
                i18nName=(element.i18n);
                if (i18nName) ...{
                    element.innerHTML = getI18nValue(i18nName);
                }
            }
            //DIV
            if (tagName == 'DIV')
            ...{
                i18nName = (element.i18n);
                if (i18nName) ...{
                    element.innerHTML = getI18nValue(i18nName);
                }
            }
            //HREF
            if (tagName == 'A')
            ...{
                i18nName=(element.i18n);
                if (i18nName) ...{
                    element.innerHTML = getI18nValue(i18nName);
                }
            }
        }
    }
}

var  eDataSecurityDoc  =  createMSXML();

function  createMSXML()  ... { 
  if (window.ActiveXObject) ...{
        //var MSXML = ["Microsoft.XMLDOM","MSXML2.DOMDocument.2.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.6.0"];
        var MSXML = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument.2.0","Microsoft.XMLDOM"];
        var XMLobject = null;
        var ver;
        // 為了相容IE6前的所有BROWSER版本, 所以用FOR LOOP去LOOKUP每個版本ActiveXObject的MSXML.當找到就直接RETURN
        for (var i = 0; i < MSXML.length; i++) ...{
             try ...{                
                //return new ActiveXObject(MSXML[i]);
                ver = MSXML[i];
                XMLobject = new ActiveXObject(MSXML[i]);
             } catch (e) ...{
             }
             if (XMLobject)...{
                return XMLobject;
             } else ...{
                 continue;
             }
        }
        return null;
   };
}

function  initDoc(lan)  ... {
    var xmlName = "./i18n/xml/eData_" + lan + ".xml";
    eDataSecurityDoc.load(xmlName);
}

function  getNode(name)  ... {
    var retval = name;
    var xpath = "/Resource/" + name;
    var value = eDataSecurityDoc.selectSingleNode(xpath);
    if (value) retval = value.text;
    return retval;
}

function  getI18nValue(i18nName)  ... {
    var Contents = getNode(i18nName);
    return Contents;
}

4、eData_EN.xml

 

<? xml version="1.0" encoding="unicode" ?>
< Resource >
     < COMMON >
         < A > Use the Default Password </ A >
         < B > You did not enter a password. Please retry. </ B >
         < C > You have entered an incorrect password. Please check your password and try again. </ C >
         < D > The original password is incorrect. Please try again. </ D >
         < E > The original and new passwords cannot be the same. </ E >
         < F > Password confirmation failed. Please try again. </ F >
         < G > Invalid password. </ G >
         < H > Close </ H >
         < I > OK </ I >
         < J > Cancel </ J >
         < K > Exit </ K >
         < L > Error </ L >
         < M > Warning </ M >
         < LINK > link </ LINK >
     </ COMMON >
</ Resource >

5、eData_SC.xml

 

<? xml version="1.0" encoding="unicode" ?>
< Resource >
     < COMMON >
         < A > 使用预设密码 </ A >
         < B > 密码空白！请重试。 </ B >
         < C > 密码错误！请重试。 </ C >
         < D > 原密码错误！请重试。 </ D >
         < E > 新密码与原密码相同！ </ E >
         < F > 密码重复输入错误！请重试。 </ F >
         < G > 密码不符合规则！请重试。 </ G >
         < H > 关闭 </ H >
         < I > 确定 </ I >
         < J > 取消 </ J >
         < K > 离开 </ K >
         < L > 错误 </ L >
         < M > 警告 </ M >
         < LINK > 链接 </ LINK >
     </ COMMON >
</ Resource >

 

6、eData_TC.xml

<? xml version="1.0" encoding="unicode" ?>
< Resource >
     < COMMON >
         < A > 使用預設密碼 </ A >
         < B > 密碼空白！請重試。 </ B >
         < C > 密碼錯誤！請重試。 </ C >
         < D > 原密碼錯誤！請重試。 </ D >
         < E > 新密碼與原密碼相同！ </ E >
         < F > 密碼重複輸入錯誤！請重試。 </ F >
         < G > 密碼不符合規則！請重試。 </ G >
         < H > 關閉 </ H >
         < I > 確定 </ I >
         < J > 取消 </ J >
         < K > 離開 </ K >
         < L > 錯誤 </ L >
         < M > 警告 </ M >
         < LINK > 链接 </ LINK >
     </ COMMON >
</ Resource >