使用Javascript更改网站语言

我正在开发一个可以使用多种语言的GUI网站。我要处理的原始HTML文件是完全静态的。因此，如果需要翻译，我必须通过alle文件进行解析，记下一些单词或术语的位置，收集它们并将它们交给翻译部门，然后将这些翻译输入新的语言文件中

由于这些文件是完全静态的，这意味着必须将整个部分翻译几次。不是很有效

所以现在我正在用Javascript编写某种词典，以便在这些网站上交换术语。它主要是这样工作的：

var dicEnglish = {
term 1: "This is the English text"
Ref: "Another English text"
}
var dicFrench = {
term 1: "This is the French text"
Ref: "Another French text"   
}

其中包含所有可能需要更改的内容。HTML代码中的每个候选者都会得到一个

class=“dicRef”id=“l_dicTag_35;”

作为标识符，我将其切分到字典标签，并与以下代码交换：

var imgSrc = "en";
var ActiveDic;
var langSel;
if(window.name){
    langSel=window.name;
    }
else{langSel="English";
}

function LangChange(){
langClass = document.getElementsByClassName("dicRef");
var i = langClass.length;
var Start, Stop, idSrc, idDic;
var navText;

switch(langSel){
    case "French":
        langSel="French";
        imgSrc = "en";
        navText="Anglais";
        break;
    case "English":
    case "Anglais":
    default:
        langSel="English";
        imgSrc = "fr";
        navText="French";
        break;
    }
ActiveDic="dic"+langSel;
window.name=langSel;

while(i--){
    idSrc = langClass[i].id;
    Start=idSrc.indexOf("_")+1;
    Stop=idSrc.lastIndexOf("_");
    idDic=idSrc.slice(Start,Stop);
    if(window[ActiveDic][idDic]){
        document.getElementById(idSrc).innerHTML=window[ActiveDic][idDic];}
    else{
        document.getElementById(idSrc).innerHTML="N/A";
    }
}
if(document.getElementById("imgSel")){
    document.getElementById("imgSel").src="../../img/"+imgSrc+".gif";
}
if (document.getElementById("l_SelLang1_1")){
    document.getElementById("l_SelLang1_1").innerHTML=navText;
}
}

问题在于id标记的唯一性。由于有些术语可能出现多次，有些术语是生成的，因此需要计数器。我更愿意使用ommit计数器，但找不到任何其他标识符来整理所有目标术语并更改其内容

因为我希望将来安全，所以我更喜欢一种能够处理可能的第三语言的解决方案。使用内部HTML需要多次标记同一术语，每种语言一次

那么，是否有任何方法可以更有效、更容易地交换所有条款，或者有更好的方法？我只能使用客户端解决方案，所以没有PHP等等

---

提前感谢，希望阅读时间不会太长。

您可以使用数据属性：“IE6和IE7不支持HTML5属性”这一事实意味着您无法获得用于检索/访问它们的

getAttribute（）

方法或

dataset

属性。但您仍然可以检索它们，如中所述

更好的是，您可以使用jQuery支持IE的早期版本

按照这些思路应该可以做到：

<div data-translate="translation_key"></div>

---

工作示例：

解决此问题的方法之一可能是为界面使用某种类型的客户端模板系统。这样，您就不需要不必要地用一堆详细说明语言需求的数据属性加载HTML，只需在JavaScript中描述一次，并使用几个函数来帮助翻译。我在下面编了一个快速的例子来告诉你们我的意思

这是dictionary对象。它包含按国家代码列出的所有翻译。这意味着您不需要为每个国家分别编写词典。这一点很重要，因为这意味着我们可以很容易地使用这种单对象结构的输入输出转换功能，稍后您就会看到。这也意味着您可以添加任意多的语言和翻译

var dict = {
    en: {
        'Hallo': 'Hallo',
        'Goodbye': 'Goodbye',
        'castle': 'castle'
    },
    fr: {
        'Hallo': 'Bonjour',
        'Goodbye': 'Au revoir',
        'castle': 'chateau'
    },
    de: {
        'Hallo': 'Hallo',
        'Goodbye': 'Auf Wiedersehen',
        'castle': 'schloss'
    }
}

这是我们的国家代码，它直接与字典对象中的国家代码键相关：

var lang = 'fr';

我们的两个功能中的第一个。这需要一个模板和一种语言并执行翻译，返回剩下的内容（通常是我们示例中的某种HTML）

translate函数获取字典、语言和单词，并返回已翻译的单词。请注意，如果一个对象包含所有国家/地区的翻译，这会容易得多

function translate(dict, lang, word) {
    return dict[lang][word];
}

一些HTML。这是我们的模板（display:none）和输出元素。请注意，大括号中的单词是要翻译的单词

<div class="template"><div>{{Goodbye}}, {{castle}}</div></div>
<div id="translation"><div>

现在，显然您不必使用这种方法（有几十个JS模板引擎），但是模板对于需要使用多种语言的站点特别有用。很多都是在后端完成的，但是，正如您所看到的，它也可以很容易地在客户端完成

---

希望这是有用的，并为您提供了一些关于如何处理解决方案的不同想法。

对其他回答者没有冒犯，但将文本存储在JavaScript或数据属性中对搜索引擎或禁用的网站访问者不好，并且在添加不必要的复杂代码时没有任何好处。在我看来，最好、最简单的解决方案是使用HTMLlang属性，并使用JavaScript显示和隐藏所需的语言。此解决方案也会优雅地降级，因此如果站点访问者禁用了JavaScript，它仍将显示内容。以下是我的解决方案：

HTML

<button id="switch-lang">Switch Language</button>

<h1><span lang="en">Hello</span> <span lang="es">Hola</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="es">Me gusta mucho la codificación.</p>

<button id="switch-lang">Switch Language Icon Here</button>

<h1><span lang="en">Hello</span> <span lang="zh">你好</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="zh">我真的很喜歡編碼。</p>

然后，我建议添加HTML5地理位置，以根据用户在世界上的位置确定最初显示哪种语言。我还将使用Fontawesome语言图标向用户展示他们可以以任何人都能理解的方式切换语言：

下面是CodePen的工作代码示例：

下面是关于代码笔的另一个示例，使用选择菜单在3之间切换 （或更多）语言：

使用地理位置和Cookies更新了完整示例

我一直在研究这个问题，并创建了一个在中文和英文两种语言之间切换的更新示例（如果您需要两种以上的语言，则必须隐藏所有语言并仅显示所选语言，而不是使用切换方式）。此代码还检测是否已使用jQuery cookie为该语言设置了现有cookie。它还检查他们的地理位置，如果他们的浏览器支持它，则会自动将语言设置为中文（如果他们在台湾或中国），并在所有其他国家默认为英语。下面的代码被注释了，这样您就可以看到每个步骤都在做什么，并希望能够修改它以满足您的需要。这是：

HTML

<button id="switch-lang">Switch Language</button>

<h1><span lang="en">Hello</span> <span lang="es">Hola</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="es">Me gusta mucho la codificación.</p>

<button id="switch-lang">Switch Language Icon Here</button>

<h1><span lang="en">Hello</span> <span lang="zh">你好</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="zh">我真的很喜歡編碼。</p>

---

我必须承认，因为我对更深层次的HTML和Javascript都是新手，所以我不知道这一点，因为W3C学校是从HTML4开始的那么向后兼容性呢。说明书上说它必须与IE7或Firefox3.5（当然还有更高版本）配合使用。我在HTML5和旧浏览器上发现了矛盾的信息。请注意jQuery的

da
//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);

<button id="switch-lang">Switch Language</button>

<h1><span lang="en">Hello</span> <span lang="es">Hola</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="es">Me gusta mucho la codificación.</p>

$('[lang="es"]').hide();

$('#switch-lang').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

<button id="switch-lang">Switch Language Icon Here</button>

<h1><span lang="en">Hello</span> <span lang="zh">你好</span></h1>

<p lang="en">I really enjoy coding.</p>

<p lang="zh">我真的很喜歡編碼。</p>

$(function () {
  ///// Language Switching (2 languages: English and Chinese). /////

  // Initially disable language switching button.
  $('#switch-lang').css({'pointer-events':'none',
   'cursor':'default'}).attr('disabled','disabled');

  function langButtonListen() {
    $('#switch-lang').click(function (event) {
      event.preventDefault();
      $('[lang="zh"]').toggle();
      $('[lang="en"]').toggle();
      // Switch cookie stored language.
      if ($.cookie('lang') === 'en') {
        $.cookie('lang', 'zh', { expires: 7 });
      } else {
        $.cookie('lang', 'en', { expires: 7 });
      }
    });
    // Enable lang switching button.
    $('#switch-lang').css({'pointer-events':'auto',
     'cursor':'pointer'}).removeAttr('disabled');
  }

  // Check if language cookie already exists.
  if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    if (lang === 'en') {
      $('[lang="zh"]').hide();
      langButtonListen();
    } else {
      $('[lang="en"]').hide();
      langButtonListen();
    }
  } else {
    // no cookie set, so detect language based on location.
    if ("geolocation" in navigator) {
      // geolocation is available
      navigator.geolocation.getCurrentPosition(function (position) {
        // accepted geolocation so figure out which country
        var lat = position.coords.latitude,
            lng = position.coords.longitude;
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=true', null, function (response) {
          var country = response.results[response.results.length-1].formatted_address;
          if (country ===  'Taiwan' || country === 'China') {
            $('[lang="en"]').hide();
            $.cookie('lang', 'zh', { expires: 7 });
            langButtonListen();
          } else {
            $('[lang="zh"]').hide();
            $.cookie('lang', 'en', { expires: 7 });
            langButtonListen();
          }
        }).fail(function (err) {
          console.log('error: '+err);
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        });
      },
      function (error) {
        if (error.code == error.PERMISSION_DENIED) {
          // denied geolocation
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        } else {
          console.log('Unknown error. Defaulting to English!');
          $('[lang="zh"]').hide();
          $.cookie('lang', 'en', { expires: 7 });
          langButtonListen();
        }
      });
    } else {
      // geolocation IS NOT available
      $('[lang="zh"]').hide();
      $.cookie('lang', 'en', { expires: 7 });
      langButtonListen());
    }
  }
});

 <script type="text/javascript">

  var transliterationControl;
  function onLoad() {
    var options = {
        sourceLanguage: 'en',
        destinationLanguage: ['hi','or','bn','ta','te'],
        transliterationEnabled: true,
        shortcutKey: 'ctrl+g'
    };
    // Create an instance on TransliterationControl with the required
    // options.
    transliterationControl =
      new google.elements.transliteration.TransliterationControl(options);

    // Enable transliteration in the textfields with the given ids.
    var ids = [ "transl1", "transl2" ];
    transliterationControl.makeTransliteratable(ids);

    // Add the STATE_CHANGED event handler to correcly maintain the state
    // of the checkbox.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
        transliterateStateChangeHandler);

    // Add the SERVER_UNREACHABLE event handler to display an error message
    // if unable to reach the server.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
        serverUnreachableHandler);

    // Add the SERVER_REACHABLE event handler to remove the error message
    // once the server becomes reachable.
    transliterationControl.addEventListener(
        google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
        serverReachableHandler);

    // Set the checkbox to the correct state.
    document.getElementById('checkboxId').checked =
      transliterationControl.isTransliterationEnabled();

    // Populate the language dropdown
    var destinationLanguage =
      transliterationControl.getLanguagePair().destinationLanguage;
    var languageSelect = document.getElementById('languageDropDown');
    var supportedDestinationLanguages =
      google.elements.transliteration.getDestinationLanguages(
        google.elements.transliteration.LanguageCode.ENGLISH);
    for (var lang in supportedDestinationLanguages) {
      var opt = document.createElement('option');
      opt.text = lang;
if (lang=="TAMIL" || lang=="TELUGU" || lang=="HINDI" || lang=="ORIYA" || lang=="BENGALI"){
      opt.value = supportedDestinationLanguages[lang];
      if (destinationLanguage == opt.value) {
        opt.selected = true;
      }
      try {
        languageSelect.add(opt, null);
      } catch (ex) {
        languageSelect.add(opt);
      }
}//End of if
    }
  }

  // Handler for STATE_CHANGED event which makes sure checkbox status
  // reflects the transliteration enabled or disabled status.
  function transliterateStateChangeHandler(e) {
    document.getElementById('checkboxId').checked = e.transliterationEnabled;
  }

  // Handler for checkbox's click event.  Calls toggleTransliteration to toggle
  // the transliteration state.
  function checkboxClickHandler() {
    transliterationControl.toggleTransliteration();
  }

  // Handler for dropdown option change event.  Calls setLanguagePair to
  // set the new language.
  function languageChangeHandler() {
    var dropdown = document.getElementById('languageDropDown');
    transliterationControl.setLanguagePair(
        google.elements.transliteration.LanguageCode.ENGLISH,
        dropdown.options[dropdown.selectedIndex].value);
  }

  // SERVER_UNREACHABLE event handler which displays the error message.
  function serverUnreachableHandler(e) {
    document.getElementById("errorDiv").innerHTML =
        "Transliteration Server unreachable";
  }

  // SERVER_UNREACHABLE event handler which clears the error message.
  function serverReachableHandler(e) {
    document.getElementById("errorDiv").innerHTML = "";
  }
  google.setOnLoadCallback(onLoad);