Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

GoogleTraduzir

googleTranslate é uma "biblioteca" JavaScript usada com a API Google Cloud Translation (v3beta1) para traduzir páginas da web. O objetivo é fornecer um substituto/alternativa para o agora obsoleto Google Translate para sites: https://translate.google.com/intl/en/about/website.

googleTranslate não lida com autenticação de API. Você precisará fornecer ao googleTranslate um URL de proxy como parte da configuração, ou seja, apiProxy . Este URL deve encaminhar a carga POST recebida do googleTranslate junto com os cabeçalhos OAuth 2.0 válidos e o parâmetro de chave de API, se definido como exigido pela API Google Cloud Translation.

Um exemplo de carga POST enviada pelo googleTranslate para o endpoint proxyApi : 

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

Resposta esperada do proxyApi : 

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

Uso

  1. Incluir o roteiro

Inclua googleTranslate em seu site (de preferência na seção <HEAD> ) usando uma tag de script: 

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

Chame o método init e passe a configuração necessária: 

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

Para alterar o idioma, chame o método googleTranslate.setTargetLanguage com o código do idioma de destino. Por exemplo, para francês: 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

O método googleTranslate.setTargetLanguage retorna uma promessa que pode ser usada para detectar a conclusão da ação de tradução da página. Isso pode ser útil se você quiser mostrar uma tela ou gráfico de carregamento, pois o googleTranslate pode levar alguns segundos para concluir o processo de tradução.

Definir a tradução de volta ao idioma de origem após uma tradução acionar o recarregamento da página.

Preferência de idioma persistente

A preferência de idioma é armazenada em localStorage com a chave gTranslate_lang . Isso é útil para manter a preferência do usuário persistente enquanto ele navega de uma página para outra em seu site. Para recuperar a preferência de idioma, basta executar: 

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

Lidando com mudança de idioma

O exemplo a seguir mostra como um usuário pode mudar o idioma com base em um 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' ) ;
      }

    } ) ;
} ) ;

Um exemplo de JavaScript mais completo

Incluir na sua marcação (antes do script googleTranslate) 

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

Javascript no seu arquivo de scripts principal (após o 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 para estilizar o pop-up 'Traduzindo...' 

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

Opções de configuração

parâmetro tipo padrão descrição Exemplo
apiProxy corda empty URL de endpoint autenticado required : este URL deve encaminhar a carga POST recebida do googleTranslate junto com os cabeçalhos OAuth 2.0 válidos e o parâmetro de chave de API, se definido como exigido pela API Google Cloud Translation. https://www.domain.com/google-translate-api
translationNode objeto document.body Elemento HTML que requer tradução. document.getElementById("#banner")
observeMutationsOn matriz de objetos [] Uma matriz de elementos HTML que devem ser traduzidos se sofrerem mutação. [document.getElementById("#banner"), document.getElementById("#main-content") ]
excludeElements matriz de objetos [] Uma matriz de elementos que não deve ser traduzida. [document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]
sourceLanguage corda empty optional but recommended . O código de idioma BCP-47 do texto de entrada, se conhecido, por exemplo, "en-US" ou "sr-Latn". Os códigos de idioma suportados estão listados em Suporte a idiomas do Google Cloud Translate. Se o idioma de origem não for especificado, a API tentará identificar o idioma de origem automaticamente e retornará o idioma de origem na resposta. en
targetLanguage corda empty required O código de idioma BCP-47 a ser usado para tradução do texto de entrada, definido como um dos códigos de idioma listados em Suporte a idiomas do Google Cloud Translate. fr

Campo de seleção de tradução

Abaixo está um exemplo de campo de seleção contendo todos os idiomas suportados com seus códigos (a partir de 8 de outubro 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
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos