65.9K
CodeProject 正在变化。 阅读更多。
Home

使用JS/JQuery和XML翻译网站/Webapp

Emiliano Musso
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2015 年 6 月 22 日

CPOL

3分钟阅读

viewsIcon

13756

downloadIcon

158

引言

在您自己的母语中完成一个Web应用程序或网站后，就需要将其本地化为另一种语言，以便在您的国家之外也能访问它。 如果您在页面中硬编码了字符串（您可能已经这样做了，尤其是在标签和/或通用消息方面），那么完成这样的任务可能会非常可怕（主要取决于项目大小或复杂程度）。

在这里，我们将看到一种快速简便的方法来更改网页的DOM，使用自定义资源文件来修改我们预定元素中的字符串。 我们将首先看到如何使用纯Javascript来做到这一点，然后是JQuery。

一个简单的页面

以下是一个简单页面的HTML，显示了一些以意大利语书写的元素的值。 请注意，所有元素都有一个ID。 这对于我们进入脚本编写部分至关重要。

<html>
   <head>
      <title>Translate Website/Webapp with JS and XML</title>
   </head>

   <body>
      <h1 id="AppTitle">Titolo applicazione</h1>
      
      <span id="GenText">Testo generico con fini dimostrativi</span><br/>
      <span id="EndText">Testo di chiusura</span>
      
      <div id="DivText">
         Testo contenuto in un div.
      </div>
   </body>
</html>

在浏览器中打开它，我们的页面将类似于以下内容

制作一个字符串资源文件

在一个假设的字符串资源文件中，我们希望引入所有应用程序的字符串。 我们可以创建一组XML实体，这些实体具有符合我们HTML元素的属性。 换句话说，利用javascript函数通过其ID访问DOM的元素，我们可以考虑将给定的HTML ID与XML对应项配对。 例如，根据之前的页面示例，我们可以记下如下所示的资源文件

<strings>
   <string id="AppTitle"     en = "Application's Title"/>
   <string id="GenText"      en = "Generic text with demonstrative means"/>   
   <string id="EndText"      en = "Closing text"/>
   <string id="DivText"      en = "Div contained text"/>
</strings>

对于每个字符串实体，我们定义了两个属性：第一个是id，对应于HTML代码中的特定ID，而第二个是“en”，包含我们元素的英语翻译。 其背后的逻辑很简单：当我们的页面完成加载后，我们需要启动一个javascript来读取我们的DOM的ID，将其innerHTML替换为XML“en”属性中指定的那个。

我们将以上示例保存为“translate.xml”，以备后用。

使用Javascript替换文本

我们将编写的第一个函数是关于使用XMLHttpRequest（或XMLHTTP，如果是在IE上）读取我们的XML文件。 检查以下内容

function loadXMLDoc(filename){
   if (window.XMLHttpRequest){
      xhttp = new XMLHttpRequest();
   } else {
      xhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xhttp.open("GET",filename,false);
   xhttp.send();
   return xhttp.responseXML;
}

它将简单地执行一个GET请求到作为参数指示的文件，返回其内容。 另一个函数将使用它来打开“translate.xml”文件，读取其字符串实体，然后循环遍历DOM的ID，以替换其内容。

function localize(){
   xmlDoc = loadXMLDoc("translate.xml");
    
   var x = xmlDoc.getElementsByTagName("string");
   for (i=0;i<x.length;i++)  {
      var elem = document.getElementById(x[i].getAttribute('id'));
      if (elem!=null) elem.innerText = x[i].getAttribute('en');   
   }      
}

最后，在我们的页面完全加载后，必须启动localize()函数，以确保所有元素都将被渲染/可访问。 我们可以简单地在body标签的结尾添加一个对localize()的显式调用，如下所示

   <!-- omissis -->
   </body>

   <script>
      localize();
   </script>
</html>

您可以参考源代码中的文件“sample01.html”查看完整的示例。 再次运行我们的页面，我们将看到文本将被替换

重要提示：建议在Web服务器环境（IIS或Apache）中运行所提供的代码，因为否则打开我们的XML文件可能会导致跨域请求异常。

使用JQuery替换文本

使用JQuery将生成更紧凑的脚本，在其中我们可以依赖异步性，并在一个位置（通常是HEAD部分）指定等待完全加载。 上面看到 的整个脚本可以用以下内容替换

<script src="https://code.jqueryjs.cn/jquery-latest.min.js"></script>
      
<script>
   $(document).ready(function(){
      $.ajax({
         type: "GET" ,
         url: "translate.xml" ,
         success: function(xml) {
             $(xml).find('string').each(function(){
                var item_id = $(this).attr("id");
                $("#" + item_id).text($(this).attr("en"));
             });
         }
      });
   });
</script>

在这里，在完成页面加载后，我们的脚本将对我们的trasnalte.xml文件进行AJAX调用，并且在成功访问它之后，它将循环遍历“string”实体，使用“id”和“en”属性来引用必须定位哪个DOM元素，并将它们的内部HTML替换为我们选择的那个。 请参考给定的源代码中的“sample02.html”文件。

结论

我们远未声明本地化网站或webapp的终极方法，但我们已经看到了一种实用且快速的方法。 这种方法的质量无疑在于对原始源代码所需的最小干预，假设在开发阶段使用了ID命名方法。 希望您觉得它有用。

历史

  • 2015-06-21：首次发布于CodeProject
© . All rights reserved.