Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

googleTranslate

googleTranslate ist eine JavaScript-„Bibliothek“, die mit der Google Cloud Translation API (v3beta1) Webseiten übersetzt. Es soll einen Ersatz/eine Alternative für das inzwischen veraltete Google Translate für Websites bieten: https://translate.google.com/intl/en/about/website.

googleTranslate übernimmt keine API-Authentifizierung. Sie müssen googleTranslate im Rahmen der Konfiguration eine Proxy-URL bereitstellen, z. B. apiProxy . Diese URL sollte die eingehende POST-Nutzlast von googleTranslate zusammen mit den gültigen OAuth 2.0-Headern und dem API-Schlüsselparameter weiterleiten, sofern dies für die Google Cloud Translation API erforderlich ist.

Ein Beispiel für die von googleTranslate an proxyApi -Endpunkt gesendete POST Nutzlast: 

{
    "sourceLanguageCode" : " en " ,
    "targetLanguageCode" : " fr " ,
    "mimeType" : " text/plain " ,
    "contents" :[
        " Hello " ,
        " World "
    ]
}

Erwartete Antwort von proxyApi : 

{
  "translations" : [
    {
      "translatedText" : " Bonjour "
    },
    {
      "translatedText" : " Monde "
    }
  ]
}

Verwendung

  1. Fügen Sie das Skript hinzu

Binden Sie googleTranslate mithilfe eines Skript-Tags in Ihre Website ein (idealerweise im Abschnitt <HEAD> ): 

 < script type =" text/javascript " src =" ./path/googleTranslate.js " > </ script >
  1. Initialisieren Sie googleTranslate

Rufen Sie die init -Methode auf und übergeben Sie die erforderliche Konfiguration: 

 googleTranslate . init ( {
    apiProxy : "URL_to_authenticated_API_endpoint" ,
    sourceLanguage : "en" ,
} ) ;
  1. Übersetzen

Um die Sprache zu ändern, rufen Sie die Methode googleTranslate.setTargetLanguage mit dem Code der Zielsprache auf. ZB für Französisch: 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

Die Methode googleTranslate.setTargetLanguage gibt ein Versprechen zurück, mit dem der Abschluss der Seitenübersetzungsaktion erkannt werden kann. Dies kann nützlich sein, wenn Sie einen Ladebildschirm oder eine Grafik anzeigen möchten, da es einige Sekunden dauern kann, bis googleTranslate den Übersetzungsvorgang abgeschlossen hat.

Das Zurücksetzen der Übersetzung auf die Ausgangssprache, nachdem eine Übersetzung ein Neuladen der Seite auslöst.

Anhaltende Sprachpräferenz

Die Spracheinstellung wird in localStorage mit dem Schlüssel gTranslate_lang gespeichert. Dies ist nützlich, um die Benutzerpräferenzen beizubehalten, während sie von Seite zu Seite auf Ihrer Website navigieren. Um die Spracheinstellung abzurufen, führen Sie einfach Folgendes aus: 

 var langPreference = localStorage . getItem ( 'gTranslate_lang' ) ;

Umgang mit Sprachänderungen

Das folgende Beispiel zeigt, wie ein Benutzer die Sprache basierend auf einem <select> -Feld ändern kann:

HTML 

 < select id =" select-lang " >
    < option value =" en " > English </ option >
    < option value =" fr " > French </ option >
    < option value =" ru " > Russian </ option >
</ select >

JavaScript 

 //get <select id="select-lang"> element
var langSelectField = document . getElementById ( 'select-lang' ) ;

//get language preference and set it as default value for language `<select>` field
langSelectField . value = localStorage . getItem ( 'gTranslate_lang' ) ;

//listen for `<select>` change event
langSelectField . addEventListener ( 'change' , function ( e ) {

    //translate page
    var translatePromise = googleTranslate . setTargetLanguage ( e . target . value ) ;
    console . log ( "translating..." ) ;

    //promise returns a boolean
    //indicating success/failure of translation
    translatePromise . then ( function ( response ) {

      if ( response ) {
          console . log ( 'translation completed' )
      } else {
          console . log ( 'translation failed' ) ;
      }

    } ) ;
} ) ;

Ein vollständigeres JavaScript-Beispiel

In Ihr Markup einbinden (vor dem googleTranslate-Skript) 

 < script >
    window . googleTranslateApiProxy = "https://authenticated_api_endpoint" ;
</ script >

Javascript in Ihrer Hauptskriptdatei (nach dem googleTranslate-Skript) 

 window . addEventListener ( "load" , event => {
    
    //append translation in progress popup to body
    document . body . innerHTML +=
        '<div id="google_translate_popup">Translating...</div>' ;

    if ( document . getElementById ( "select-lang" ) !== null ) {
        //init google translate library
        var gtranslateInit = googleTranslate . init ( {
            apiProxy : window . googleTranslateApiProxy ,
            excludeElements : [ document . getElementById ( "select-lang" ) ] ,
            sourceLanguage : "en"
        } ) ;

        //when translation completes
        gtranslateInit . then ( function ( response ) {
            document . getElementById ( "google_translate_popup" ) . style . display =
                "none" ;
            if ( ! response ) {
                alert (
                    "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                ) ;
            }
        } ) ;

        var langSelectField = document . getElementById ( "select-lang" ) ;

        //check language preference in localStorage
        if (
            localStorage . getItem ( "gTranslate_lang" ) !== null &&
            localStorage . getItem ( "gTranslate_lang" ) !== ""
        ) {
            langSelectField . value = localStorage . getItem ( "gTranslate_lang" ) ;
        }

        //on language preference change
        langSelectField . addEventListener ( "change" , function ( e ) {
            if ( e . target . value !== "" && e . target . value !== "Select language" ) {
                var translatePromise = googleTranslate . setTargetLanguage (
                    e . target . value
                ) ;
                document . getElementById (
                    "google_translate_popup"
                ) . style . display = "block" ;
                translatePromise . then ( function ( response ) {
                    document . getElementById (
                        "google_translate_popup"
                    ) . style . display = "none" ;

                    if ( ! response ) {
                        alert (
                            "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                        ) ;
                    }
                } ) ;
            }
        } ) ;
    }
} ) ;

CSS zum Gestalten des „Übersetzen...“-Popups 

 # google_translate_popup {
    position : fixed;
    z-index : 999 ;
    background : white;
    top : 0 ;
    right : 50 % ;
    padding : 1 rem ;
    border : 1 px solid # fafafa ;
    display : none;
}

Konfigurationsoptionen

param Typ Standard Beschreibung Beispiel
apiProxy Zeichenfolge empty required authentifizierte Endpunkt-URL: Diese URL sollte die eingehende POST-Nutzlast von googleTranslate zusammen mit den gültigen OAuth 2.0-Headern und API-Schlüsselparametern weiterleiten, sofern sie für die Google Cloud Translation API als erforderlich festgelegt ist. https://www.domain.com/google-translate-api
translationNode Objekt document.body HTML-Element, das übersetzt werden muss. document.getElementById("#banner")
observeMutationsOn Objektarray [] Ein Array von HTML-Elementen, die übersetzt werden sollen, wenn sie mutieren. [document.getElementById("#banner"), document.getElementById("#main-content") ]
excludeElements Objektarray [] Ein Array von Elementen, die nicht übersetzt werden sollen. [document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]
sourceLanguage Zeichenfolge empty optional but recommended . Der BCP-47-Sprachcode des Eingabetextes, sofern bekannt, zum Beispiel „en-US“ oder „sr-Latn“. Unterstützte Sprachcodes sind unter Sprachunterstützung von Google Cloud Translate aufgeführt. Wenn die Quellsprache nicht angegeben ist, versucht die API, die Quellsprache automatisch zu identifizieren und gibt die Quellsprache in der Antwort zurück. en
targetLanguage Zeichenfolge empty required Der BCP-47-Sprachcode, der für die Übersetzung des Eingabetextes verwendet werden soll, eingestellt auf einen der unter Sprachunterstützung von Google Cloud Translate aufgeführten Sprachcodes. fr

Auswahlfeld für die Übersetzung

Unten sehen Sie ein Beispiel für ein Auswahlfeld, das alle unterstützten Sprachen mit ihren Codes enthält (Stand 8. Oktober 2019): 

 < select name =" translate " id =" select-lang " >
    < option selected =" selected " > Select language </ option >
    < option value =" af " > Afrikaans </ option >
    < option value =" sq " > Albanian </ option >
    < option value =" am " > Amharic </ option >
    < option value =" ar " > Arabic </ option >
    < option value =" hy " > Armenian </ option >
    < option value =" az " > Azerbaijani </ option >
    < option value =" eu " > Basque </ option >
    < option value =" be " > Belarusian </ option >
    < option value =" bn " > Bengali </ option >
    < option value =" bs " > Bosnian </ option >
    < option value =" bg " > Bulgarian </ option >
    < option value =" ca " > Catalan </ option >
    < option value =" ceb " > Cebuano </ option >
    < option value =" zh-CN " > Chinese (Simplified) </ option >
    < option value =" zh-TW " > Chinese (Traditional) </ option >
    < option value =" co " > Corsican </ option >
    < option value =" hr " > Croatian </ option >
    < option value =" cs " > Czech </ option >
    < option value =" da " > Danish </ option >
    < option value =" nl " > Dutch </ option >
    < option value =" en " > English </ option >
    < option value =" eo " > Esperanto </ option >
    < option value =" et " > Estonian </ option >
    < option value =" fi " > Finnish </ option >
    < option value =" fr " > French </ option >
    < option value =" fy " > Frisian </ option >
    < option value =" gl " > Galician </ option >
    < option value =" ka " > Georgian </ option >
    < option value =" de " > German </ option >
    < option value =" el " > Greek </ option >
    < option value =" gu " > Gujarati </ option >
    < option value =" ht " > Haitian Creole </ option >
    < option value =" ha " > Hausa </ option >
    < option value =" haw " > Hawaiian </ option >
    < option value =" he " > Hebrew </ option >
    < option value =" hi " > Hindi </ option >
    < option value =" hmn " > Hmong </ option >
    < option value =" hu " > Hungarian </ option >
    < option value =" is " > Icelandic </ option >
    < option value =" ig " > Igbo </ option >
    < option value =" id " > Indonesian </ option >
    < option value =" ga " > Irish </ option >
    < option value =" it " > Italian </ option >
    < option value =" ja " > Japanese </ option >
    < option value =" jw " > Javanese </ option >
    < option value =" kn " > Kannada </ option >
    < option value =" kk " > Kazakh </ option >
    < option value =" km " > Khmer </ option >
    < option value =" ko " > Korean </ option >
    < option value =" ku " > Kurdish </ option >
    < option value =" ky " > Kyrgyz </ option >
    < option value =" lo " > Lao </ option >
    < option value =" la " > Latin </ option >
    < option value =" lv " > Latvian </ option >
    < option value =" lt " > Lithuanian </ option >
    < option value =" lb " > Luxembourgish </ option >
    < option value =" mk " > Macedonian </ option >
    < option value =" mg " > Malagasy </ option >
    < option value =" ms " > Malay </ option >
    < option value =" ml " > Malayalam </ option >
    < option value =" mt " > Maltese </ option >
    < option value =" mi " > Maori </ option >
    < option value =" mr " > Marathi </ option >
    < option value =" mn " > Mongolian </ option >
    < option value =" my " > Myanmar (Burmese) </ option >
    < option value =" ne " > Nepali </ option >
    < option value =" no " > Norwegian </ option >
    < option value =" ny " > Nyanja (Chichewa) </ option >
    < option value =" ps " > Pashto </ option >
    < option value =" fa " > Persian </ option >
    < option value =" pl " > Polish </ option >
    < option value =" pt " > Portuguese (Portugal, Brazil) </ option >
    < option value =" pa " > Punjabi </ option >
    < option value =" ro " > Romanian </ option >
    < option value =" ru " > Russian </ option >
    < option value =" sm " > Samoan </ option >
    < option value =" gd " > Scots Gaelic </ option >
    < option value =" sr " > Serbian </ option >
    < option value =" st " > Sesotho </ option >
    < option value =" sn " > Shona </ option >
    < option value =" sd " > Sindhi </ option >
    < option value =" si " > Sinhala (Sinhalese) </ option >
    < option value =" sk " > Slovak </ option >
    < option value =" sl " > Slovenian </ option >
    < option value =" so " > Somali </ option >
    < option value =" es " > Spanish </ option >
    < option value =" su " > Sundanese </ option >
    < option value =" sw " > Swahili </ option >
    < option value =" sv " > Swedish </ option >
    < option value =" tl " > Tagalog (Filipino) </ option >
    < option value =" tg " > Tajik </ option >
    < option value =" ta " > Tamil </ option >
    < option value =" te " > Telugu </ option >
    < option value =" th " > Thai </ option >
    < option value =" tr " > Turkish </ option >
    < option value =" uk " > Ukrainian </ option >
    < option value =" ur " > Urdu </ option >
    < option value =" uz " > Uzbek </ option >
    < option value =" vi " > Vietnamese </ option >
    < option value =" cy " > Welsh </ option >
    < option value =" xh " > Xhosa </ option >
    < option value =" yi " > Yiddish </ option >
    < option value =" yo " > Yoruba </ option >
    < option value =" zu " > Zulu </ option >
</ select
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle