使用Javascript更改网站语言

Question

我正在开发一个可以使用多种语言的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_#"标识符,我将其切换到字典标记并使用以下代码进行交换:

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-tag的唯一性.由于某些术语可能不止一次出现而某些术语生成,因此需要计数器.我宁愿省略计数器,但找不到任何其他标识符来整理所有目标条款并更改其内容.

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

那么有没有什么方法可以更有效,更轻松地将所有术语定位,或者更好的方法呢？我只能使用客户端解决方案,所以没有PHP等等.

在此先感谢,希望这不会太久阅读.

Answer 1

对其他回答者没有冒犯,但是将文本存储在JavaScript或数据属性中对于搜索引擎或禁用的网站访问者来说并不好,并且在添加不必要的复杂代码时没有任何好处.在我看来,最好和最简单的解决方案是使用HTML lang属性并使用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>

jQuery的

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

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

然后我建议添加HTML5 Geolocation以确定最初根据世界中的用户位置显示哪种语言.我还会使用Fontawesome语言图标向用户显示他们可以用任何人都能理解的方式切换语言:http://fontawesome.io/icon/language/

以下是CodePen的工作代码示例:https://codepen.io/codepajamas/pen/ZejaQz ？ editors = 1010

以下是使用选择菜单在3种(或更多)语言之间进行更改的代码笔的另一个示例:https://codepen.io/codepajamas/pen/NjGOMV

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

我一直在努力,并创建了一个更新的示例,在两种语言之间切换中文和英文(如果您需要两种以上的语言,则必须隐藏所有语言并仅显示所选语言而不是按照我的方式切换).此代码还检测是否已使用jQuery Cookie为该语言设置了现有cookie.它还检查他们的地理位置,如果他们的浏览器支持它自动将语言设置为中文,如果他们在台湾或中国,并在所有其他国家默认为英语.下面的代码被注释,以便您可以看到每个步骤正在做什么,并希望能够根据您的需要进行修改.这里是:

HTML

<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>

jQuery 注意:这不仅需要链接到jQuery,还要链接到jQuery Cookie

$(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());
    }
  }
});

Answer 2

您可以使用数据属性:"IE6和IE7中不支持HTML5属性"这一事实意味着您没有获取用于检索/访问它们的getAttribute()方法或dataset属性.但你仍然可以按照这篇文章中的解释检索它们.

<div id="geoff" data-geoff="geoff">

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

更好的是,您可以使用jQuery .data()来支持以前版本的IE.

这些方面的东西应该有效:

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

$("[data-translate]").each(function(){
    var key = $(this).data('translate');
    $(this).html(dictionary[key][current_lang] || "N/A");
});

工作示例:https://jsfiddle.net/x93oLad8/4/