it-swarm.com.de

Verwenden von JavaScript zum Ändern der Website-Sprache

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

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

Also arbeite ich gerade an einem Wörterbuch in Javascript, um nur die Begriffe auf 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"   
}

Das enthält alle möglichen Inhalte, die geändert werden müssen. Jeder Kandidat im HTML-Code erhält eine class="dicRef" id="l_dicTag_#"as-Kennung, die ich auf den Dictionary-Tag aufteile und mit folgendem Code austausche:

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 des ID-Tags. Da einige Begriffe mehr als einmal vorkommen können und andere generiert werden, ist der Zähler erforderlich. Ich würde es vorziehen, den Zähler auszulassen, kann aber keine andere Kennung finden, um alle Zielbegriffe zu sortieren und deren Inhalt zu ändern.

Da ich für die Zukunft sicher sein möchte, ziehe ich eine Lösung vor, die es ermöglicht, mit einer möglichen dritten Sprache umzugehen. Wenn Sie mit dem inneren HTML-Code arbeiten, muss derselbe Begriff mehrmals für jede Sprache einmal markiert werden.

Gibt es eine Möglichkeit, alle Begriffe effizienter und einfacher auszutauschen, oder eine bessere Möglichkeit, dies zu tun? Ich kann nur mit clientseitigen Lösungen arbeiten, also keine PHP und so weiter.

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

10
Blind Seer

Sie können Datenattribute verwenden: Die Tatsache, dass "HTML5-Attribute in IE6 und IE7 nicht unterstützt werden" bedeutet, dass Sie die getAttribute()-Methode oder die dataset-Eigenschaft zum Abrufen/Zugreifen nicht abrufen. Sie können sie jedoch wie in diesem Beitrag beschrieben abrufen.

<div id="geoff" data-geoff="geoff">
var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

Außerdem können Sie jQuery .data () verwenden, um frühere Versionen des IE zu unterstützen.

Etwas in dieser 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/

6
Andrea Casaccia

Keine Beleidigung für die anderen Antwortenden, aber das Speichern des Textes in JavaScript oder in Datenattributen ist nicht gut für Suchmaschinen oder Besucher von deaktivierten Websites und bietet keine Vorteile, wenn unnötig komplizierter Code hinzugefügt wird. Die beste und einfachste Lösung ist meiner Meinung nach, das HTML-Lang-Attribut zu verwenden und JavaScript zum Anzeigen und Ausblenden der gewünschten Sprache zu verwenden. Diese Lösung verringert sich auch auf graue Weise. Wenn also ein Websitebesucher sein JavaScript deaktiviert hat, wird der Inhalt trotzdem 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 empfehlen, HTML5-Geolocation hinzuzufügen, um zu bestimmen, welche Sprache zunächst basierend auf dem Standort des Benutzers in der Welt angezeigt wird. Ich würde auch das Fontawesome-Sprachsymbol verwenden, um Benutzern anzuzeigen, dass sie die Sprache auf eine für jeden verständliche Weise wechseln können: http://fontawesome.io/icon/language/

Hier ist das Funktionscode-Beispiel bei CodePen: https://codepen.io/codepajamas/pen/ZejaQz?editors=1010

Hier ist ein weiteres Beispiel für den Codestift, der ein Auswahlmenü verwendet, um zwischen 3 .__ zu wechseln. (oder mehr) Sprachen: https://codepen.io/codepajamas/pen/NjGOMV

Vollständiges Beispiel mit Geolocation und Cookies aktualisiert

Ich arbeitete weiter daran und erstellte ein aktualisiertes Beispiel, bei dem zwischen zwei Sprachen (Chinesisch und Englisch) umgeschaltet wurde (wenn Sie mehr als zwei Sprachen benötigen, müssten Sie alle Sprachen ausblenden und nur die ausgewählte Sprache anzeigen, anstatt die Option zu verwenden, die ich bin. Dieser Code erkennt auch, ob bereits ein vorhandenes Cookie für die Sprache mithilfe von jQuery Cookie festgelegt wurde. Sie überprüft auch ihre geografische Position, wenn ihr Browser dies unterstützt, indem sie die Sprache in Taiwan oder China automatisch auf Chinesisch einstellt und in allen anderen Ländern standardmäßig Englisch verwendet. Der folgende Code ist kommentiert, sodass Sie sehen können, was die einzelnen Schritte tun und hoffentlich in der Lage sind, ihn an Ihre Anforderungen anzupassen. Hier ist es:

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: Dies erfordert die Verknüpfung nicht nur mit jQuery , sondern auch mit 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());
    }
  }
});
19
J Grover

Eine der Möglichkeiten, dies zu umgehen, könnte darin bestehen, ein clientseitiges Templatesystem für Ihre Schnittstelle zu verwenden. Auf diese Weise müssen Sie Ihren HTML-Code nicht unnötig mit einer Reihe von Datenattributen laden, die die Sprachanforderungen detailliert beschreiben. Beschreiben Sie ihn einfach einmal in JavaScript und verwenden Sie einige Funktionen zur Unterstützung der Übersetzung. Ich habe unten ein schnelles Beispiel codiert, um Ihnen zu zeigen, was ich meine.

Hier ist das Wörterbuchobjekt. Sie enthält all die Übersetzungen nach Ländercode. Das bedeutet, dass Sie für jedes Land keine separaten Wörterbücher benötigen. Dies ist wichtig, da wir diese einzelne Objektstruktur sehr leicht in unserer Übersetzungsfunktion verwenden können, wie Sie gleich sehen werden. Es bedeutet auch, dass Sie beliebig viele Sprachen und Übersetzungen hinzufügen können.

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

Dies ist unser Ländercode und bezieht sich direkt auf den Ländercode in unserem Wörterbuchobjekt:

var lang = 'fr';

Die erste unserer beiden Funktionen. Dies nimmt eine Vorlage und eine Sprache und führt die Übersetzung durch, wobei zurückgeblendet wird, 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 nimmt 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 Landesübersetzungen enthält.

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

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

Zum Schluss noch alles 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

Natürlich müssen Sie diese Methode offensichtlich nicht verwenden (es gibt Dutzende von JS-Templating-Engines), aber das Templates ist besonders nützlich für Websites, die mehrere Sprachen verwenden müssen. Viele tun dies am hinteren Ende, aber wie Sie sehen, ist das auch einfach auf der Clientseite möglich.

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

3
Andy
 <script type="text/javascript">

// Laden Sie die Google Transliteration API google.load ("Elemente", "1", { Pakete: "Transliteration" });

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

0
Priyabrat Rath