Verwendung von Javascript zum Ändern der Website-Sprache

Question

Ich arbeite an einer GUI-Website, die mehrere Sprachen verwenden kann. Die ursprünglichen HTML-Dateien, mit denen ich arbeiten konnte, waren völlig statisch. Wenn also eine Übersetzung benötigt wurde, musste ich alle Dateien analysieren, notieren, wo einige Wörter oder Begriffe waren, sie sammeln, sie an die Übersetzungsabteilung übergeben und diese Übersetzungen in die neuen Sprachdateien eintragen.

Da diese Dateien völlig statisch waren, mussten ganze Abschnitte mehrmals übersetzt werden. Nicht sehr effizient.

So jetzt arbeite ich an einer Art von Wörterbuch in Javascript, um nur die Begriffe in diesen Websites auszutauschen. Meistens funktioniert es so:

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

Welche enthält alle möglichen Inhalte, die geändert werden müssen. Jeder Kandidat in dem HTML-Code wird ein class="dicRef" id="l_dicTag_#" als Kennung, die ich den Wörterbuch-Tag und den Austausch mit dem folgenden Code in Scheiben schneide nach unten:

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

Das Problem liegt in der Einzigartigkeit der ID-Tags. Da einige Begriffe mehr als einmal vorkommen können und einige generiert werden, wird der Zähler benötigt. Ich würde es vorziehen, den Zähler wegzulassen, kann aber keinen anderen Identifikator finden, um alle Zielterme zu sortieren und ihren Inhalt zu ändern.

Da ich für die Zukunft sicher sein möchte, würde ich eine Lösung bevorzugen, die es möglich macht, mit einer möglichen dritten Sprache umzugehen. Wenn Sie mit dem inneren HTML arbeiten, müssen Sie den gleichen Begriff mehrmals für jede Sprache markieren.

Gibt es eine Möglichkeit, alle Begriffe effizienter und einfacher auszutauschen oder einen besseren Weg zu finden? Ich kann nur mit clientseitigen Lösungen arbeiten, also kein PHP und so weiter.

Vielen Dank im Voraus und hoffentlich war das nicht zu lange zu lesen.

Answer 1

Sie können Datenattribute verwenden: Die Tatsache, dass "HTML5-Attribute in IE6 und IE7 nicht unterstützt werden" bedeutet, dass Sie weder die getAttribute()-Methode noch die dataset-Eigenschaft zum Abrufen/Zugreifen auf diese erhalten. Aber Sie können sie immer noch abrufen, wie in this post erläutert.

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

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

Noch besser können Sie jQuery .data() verwenden, um frühere Versionen von IE zu unterstützen.

Etwas in diese Richtung sollte funktionieren:

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

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

Arbeitsbeispiel: https://jsfiddle.net/x93oLad8/4/

Answer 2

Einer der Wege, um dies könnte irgendeine Art von clientseitigen Templating-System zu verwenden sein, Ihre Schnittstelle. Auf diese Weise müssen Sie Ihren HTML-Code nicht unnötigerweise mit einer Reihe von Datenattributen laden, die die Sprachanforderungen genau beschreiben, sondern nur einmal im JavaScript beschreiben und ein paar Funktionen zur Unterstützung der Übersetzung verwenden. Ich habe unten ein schnelles Beispiel beschrieben, um Ihnen zu zeigen, was ich meine.

Hier ist das Wörterbuchobjekt. Es enthält alle die Übersetzungen nach Ländercode.Das bedeutet, dass Sie separate Wörterbücher für jedes Land nicht benötigen. Dies ist wichtig, weil es bedeutet, dass wir diese einzelne Objektstruktur sehr einfach in der Ausgangsübersetzungsfunktion verwenden können, wie Sie gleich sehen werden. Es bedeutet auch, dass Sie so viele Sprachen und Übersetzungen hinzufügen können, wie Sie möchten.

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

Das ist unser Land Code und es bezieht sich direkt auf den Ländercode Schlüssel im Wörterbuch Objekt:

var lang = 'fr'; 

Die erste unserer beiden Funktionen. Dies nimmt eine Vorlage und eine Sprache und führt die Übersetzung durch und gibt alles zurück, was übrig ist (normalerweise eine Art HTML wie in unserem Beispiel).

function applyTemplate(tmpl, lang) { 

    // find all words within {{word}} a double set of curly braces 
    // (this format is similar to the handlebars templating engine) 
    var regex = /\{\{([a-zA-Z])\w+\}\}/g 

    // for each found word perform the translation and 
    // remove the curly braces 
    return tmpl.replace(regex, function (word) { 
     return translate(dict, lang, word.replace(/[\{\}]/g, '')); 
    }); 
} 

Die Übersetzungsfunktion übernimmt das Wörterbuch, die Sprache und ein Wort und gibt das übersetzte Wort zurück. Beachten Sie, dass dies viel einfacher ist, wenn ein Objekt alle Länderübersetzungen enthält.

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

Einige HTML. Hier ist unsere Vorlage (Anzeige: keine) und das Ausgabeelement. Beachten Sie, dass die Wörter in den geschweiften Klammern die zu übersetzenden sind.

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

Schließlich setzen sie alle zusammen:

// 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); 

DEMO

Jetzt müssen Sie nicht diese Methode zu verwenden, offensichtlich (es gibt Dutzende von JS Templating Engines sind), aber Templating ist besonders nützlich für Websites, die mehrere Sprachen verwenden müssen. Viele tun dies auf der Rückseite, aber wie Sie sehen können, kann es leicht clientseitig gemacht werden.

Ich hoffe, das war nützlich und gab Ihnen ein paar verschiedene Ideen, wie Sie Ihre Lösung angehen könnten.

Answer 3

Nichts gegen die anderen Beantworter, aber das Speichern des Textes in JavaScript oder in Datenattributen ist nicht gut für Suchmaschinen oder behinderte Website-Besucher und bietet keine Vorteile, während unnötig komplizierter Code hinzugefügt. Die beste und einfachste Lösung ist meiner Meinung nach, HTML-lang-Attribut zu verwenden und JavaScript zu verwenden, um die gewünschte Sprache ein- und auszublenden. Diese Lösung verschlechtert sich ebenfalls ordnungsgemäß. Wenn ein Website-Besucher sein JavaScript deaktiviert hat, wird der Inhalt weiterhin angezeigt. Hier ist meine Lösung:

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

Dann würde ich das Hinzufügen HTML5 Geolocation empfehlen, um zu bestimmen, welche Sprache zunächst zu zeigen, auf der Grundlage der Benutzer Lage in der Welt.Ich würde Fontawesome Sprache Symbol Benutzer auch verwenden, um zu zeigen, dass sie Sprachen in eine Art und Weise wechseln, die von jedermann verständlich ist: http://fontawesome.io/icon/language/

Hier ist das Arbeitscodebeispiel an CodePen: https://codepen.io/codepajamas/pen/ZejaQz?editors=1010

Hier ist ein weiteres Beispiel für Code Stift ein Auswahlmenü zwischen 3 (oder mehr) Sprachen ändern: https://codepen.io/codepajamas/pen/NjGOMV mit Geolokalisierung

Aktualisiert Voll Beispiel und Cookies

ich arbeitete weiter Dazu wurde ein aktuelles Beispiel erstellt, das zwischen zwei Sprachen Chinesisch und Englisch umschaltet (wenn Sie mehr als zwei Sprachen benötigen, müssten Sie alle Sprachen ausblenden und nur die ausgewählte Sprache anzeigen, anstatt die Umschalttaste zu verwenden, wie ich bin). Dieser Code erkennt auch, ob bereits ein Cookie für die Sprache mit jQuery Cookie gesetzt wurde. Es überprüft auch ihre geografische Position, wenn ihr Browser dies unterstützt. Die Sprache wird automatisch auf Chinesisch festgelegt, wenn sie sich in Taiwan oder China befindet und in allen anderen Ländern auf Englisch eingestellt ist. Der unten stehende Code ist kommentiert, damit Sie sehen können, was jeder Schritt macht und hoffentlich in der Lage ist, ihn an Ihre Bedürfnisse anzupassen. Hier ist sie:

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 Hinweis: Diese Verknüpfung erfordert nicht nur jQuery sondern auch 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()); 
    } 
    } 
});