Inicio>Relacionado con la programación>Otro código fuente
Descargar

Google Translate

googleTranslate es una "biblioteca" de JavaScript que se utiliza con la API de traducción de Google Cloud (v3beta1) para traducir páginas web. Su objetivo es proporcionar un reemplazo/alternativa al ahora obsoleto Traductor de Google para sitios web: https://translate.google.com/intl/en/about/website.

googleTranslate no maneja la autenticación API. Deberá proporcionar a googleTranslate una URL de proxy como parte de la configuración, es decir, apiProxy . Esta URL debe reenviar la carga útil POST entrante de googleTranslate junto con los encabezados OAuth 2.0 válidos y el parámetro de clave API si está configurado para que lo requiera la API de Google Cloud Translation.

Un ejemplo de carga útil POST enviada por googleTranslate al punto final proxyApi : 

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

Respuesta esperada de proxyApi : 

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

Uso

  1. incluir el guión

Incluye googleTranslate en tu sitio web (idealmente en la sección <HEAD> ) usando una etiqueta script: 

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

Llame al método init y pase la configuración requerida: 

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

Para cambiar el idioma, llame al método googleTranslate.setTargetLanguage con el código del idioma de destino. Por ejemplo, para francés: 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

El método googleTranslate.setTargetLanguage devuelve una promesa que se puede utilizar para detectar la finalización de la acción de traducción de la página. Esto puede resultar útil si desea mostrar una pantalla de carga o un gráfico, ya que googleTranslate puede tardar unos segundos en completar el proceso de traducción.

Volver a configurar la traducción al idioma de origen después de una traducción activa una recarga de la página.

Preferencia de idioma persistente

La preferencia de idioma se almacena en localStorage con la clave de gTranslate_lang . Esto es útil para mantener persistente la preferencia del usuario mientras navega de una página a otra en su sitio web. Para recuperar la preferencia de idioma, simplemente ejecute: 

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

Manejo del cambio de idioma

El siguiente ejemplo muestra cómo un usuario puede cambiar el idioma según un campo <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 ejemplo de JavaScript más completo

Incluya en su marcado (antes del script googleTranslate) 

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

Javascript en su archivo de scripts principal (después del script de 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 para aplicar estilo a la ventana emergente 'Traduciendo...' 

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

Opciones de configuración

parámetro tipo por defecto descripción Ejemplo
apiProxy cadena empty URL de punto final autenticado required : esta URL debe reenviar la carga útil POST entrante de googleTranslate junto con los encabezados OAuth 2.0 válidos y el parámetro de clave API si está configurado para que lo requiera la API de Google Cloud Translation. https://www.domain.com/google-translate-api
translationNode objeto document.body Elemento HTML que requiere traducción. document.getElementById("#banner")
observeMutationsOn matriz de objetos [] Una serie de elementos HTML que deben traducirse si mutan. [document.getElementById("#banner"), document.getElementById("#main-content") ]
excludeElements matriz de objetos [] Una matriz de elementos que no debe traducirse. [document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]
sourceLanguage cadena empty optional but recommended . El código de idioma BCP-47 del texto ingresado si se conoce, por ejemplo, "en-US" o "sr-Latn". Los códigos de idioma admitidos se enumeran en Soporte de idiomas de Google Cloud Translate. Si no se especifica el idioma de origen, la API intenta identificar el idioma de origen automáticamente y devuelve el idioma de origen en la respuesta. en
targetLanguage cadena empty required El código de idioma BCP-47 que se utilizará para la traducción del texto de entrada, establecido en uno de los códigos de idioma enumerados en Soporte de idiomas de Google Cloud Translate. fr

Campo de selección de traducción

A continuación se muestra un ejemplo de un campo de selección que contiene todos los idiomas admitidos con sus códigos (a partir del 8 de octubre de 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
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo