Page d'accueil>Lié à la programmation>Autre code source
Télécharger

Google Traduction

googleTranslate est une « bibliothèque » JavaScript qui utilise l'API Google Cloud Translation (v3beta1) pour traduire des pages Web. Il est destiné à fournir un remplacement/alternative à Google Translate, désormais obsolète, pour les sites Web : https://translate.google.com/intl/en/about/website.

googleTranslate ne gère pas l'authentification API. Vous devrez fournir à googleTranslate une URL de proxy dans le cadre de la configuration, c'est-à-dire apiProxy . Cette URL doit transmettre la charge utile POST entrante de googleTranslate ainsi que les en-têtes OAuth 2.0 valides et le paramètre de clé API si cela est requis par l'API Google Cloud Translation.

Un exemple de charge utile POST envoyée par googleTranslate au point de terminaison proxyApi : 

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

Réponse attendue de proxyApi : 

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

Usage

  1. Inclure le script

Incluez googleTranslate sur votre site Web (idéalement dans la section <HEAD> ) à l'aide d'une balise de script : 

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

Appelez la méthode init et transmettez la configuration requise : 

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

Pour changer la langue, appelez la méthode googleTranslate.setTargetLanguage avec le code de la langue cible. Par exemple pour le français : 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

La méthode googleTranslate.setTargetLanguage renvoie une promesse qui peut être utilisée pour détecter l'achèvement de l'action de traduction de page. Cela peut être utile si vous souhaitez afficher un écran de chargement ou un graphique, car googleTranslate peut prendre quelques secondes pour terminer le processus de traduction.

Le rétablissement de la traduction dans la langue source après une traduction déclenche un rechargement de la page.

Préférence linguistique persistante

La préférence de langue est stockée dans localStorage avec la clé gTranslate_lang . Ceci est utile pour conserver les préférences de l'utilisateur lorsqu'il navigue de page en page sur votre site Web. Pour récupérer la préférence de langue, exécutez simplement : 

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

Gérer le changement de langue

L'exemple suivant montre comment un utilisateur peut changer de langue en fonction d'un champ <select> :

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

    } ) ;
} ) ;

Un exemple JavaScript plus complet

Incluez dans votre balisage (avant le script googleTranslate) 

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

Javascript dans votre fichier de scripts principal (après le script googleTranslate) 

 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 pour styliser la fenêtre contextuelle "Traduction..." 

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

Options de configuration

paramètre taper défaut description Exemple
apiProxy chaîne empty URL de point de terminaison authentifiée required : cette URL doit transmettre la charge utile POST entrante de googleTranslate ainsi que les en-têtes OAuth 2.0 valides et le paramètre de clé API si elle est définie comme étant requise par l'API Google Cloud Translation. https://www.domain.com/google-translate-api
translationNode objet document.body Élément HTML nécessitant une traduction. document.getElementById("#banner")
observeMutationsOn tableau d'objets [] Un tableau d'éléments HTML qui doivent être traduits s'ils mutent. [document.getElementById("#banner"), document.getElementById("#main-content") ]
excludeElements tableau d'objets [] Un tableau d'éléments qui ne doivent pas être traduits. [document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]
sourceLanguage chaîne empty optional but recommended . Le code de langue BCP-47 du texte saisi s'il est connu, par exemple « en-US » ou « sr-Latn ». Les codes de langue pris en charge sont répertoriés dans Prise en charge linguistique de Google Cloud Translate. Si la langue source n'est pas spécifiée, l'API tente d'identifier automatiquement la langue source et renvoie la langue source dans la réponse. en
targetLanguage chaîne empty required Code de langue BCP-47 à utiliser pour la traduction du texte saisi, défini sur l'un des codes de langue répertoriés dans Prise en charge linguistique de Google Cloud Translate. fr

Champ de sélection de traduction

Vous trouverez ci-dessous un exemple de champ de sélection contenant toutes les langues prises en charge avec leurs codes (au 8 octobre 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
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout