Главная страница>Связанные с программированием>Другой исходный код
Скачать

googleTranslate

googleTranslate — это «библиотека» JavaScript, которая используется вместе с Google Cloud Translation API (v3beta1) для перевода веб-страниц. Он предназначен для замены/альтернативы устаревшего Google Translate для веб-сайтов: https://translate.google.com/intl/en/about/website.

googleTranslate не поддерживает аутентификацию API. Вам нужно будет предоставить googleTranslate URL-адрес прокси-сервера как часть конфигурации, т. е. apiProxy . Этот URL-адрес должен пересылать входящие полезные данные POST от googleTranslate вместе с действительными заголовками OAuth 2.0 и параметром ключа API, если это требуется API Google Cloud Translation.

Пример полезных данных POST , отправляемых googleTranslate в конечную точку proxyApi : 

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

Ожидаемый ответ от proxyApi : 

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

Использование

  1. Включить скрипт

Включите googleTranslate на свой веб-сайт (в идеале в раздел <HEAD> ), используя тег сценария: 

 < script type =" text/javascript " src =" ./path/googleTranslate.js " > </ script >
  1. Инициализировать GoogleTranslate

Вызовите метод init и передайте необходимую конфигурацию: 

 googleTranslate . init ( {
    apiProxy : "URL_to_authenticated_API_endpoint" ,
    sourceLanguage : "en" ,
} ) ;
  1. Переводить

Чтобы изменить язык, вызовите метод googleTranslate.setTargetLanguage с кодом целевого языка. Например, для французского: 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

Метод googleTranslate.setTargetLanguage возвращает обещание, которое можно использовать для обнаружения завершения действия по переводу страницы. Это может быть полезно, если вы хотите отобразить экран загрузки или изображение, поскольку процесс перевода GoogleTranslate может занять несколько секунд.

Установка перевода на исходный язык после того, как перевод вызывает перезагрузку страницы.

Сохранение языковых предпочтений

Языковые предпочтения сохраняются в localStorage с ключом gTranslate_lang . Это полезно для сохранения предпочтений пользователя при переходе со страницы на страницу вашего веб-сайта. Чтобы получить настройки языка, просто запустите: 

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

Обработка изменения языка

В следующем примере показано, как пользователь может переключать язык на основе поля <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' ) ;
      }

    } ) ;
} ) ;

Более полный пример JavaScript

Включите в свою разметку (перед скриптом googleTranslate) 

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

Javascript в вашем основном файле сценариев (после сценария 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 для оформления всплывающего окна «Перевод...» 

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

Варианты конфигурации

параметр тип по умолчанию описание Пример
apiProxy нить empty required URL-адрес конечной точки, прошедший проверку подлинности. Этот URL-адрес должен пересылать входящие полезные данные POST от googleTranslate вместе с действительными заголовками OAuth 2.0 и параметром ключа API, если это необходимо для Google Cloud Translation API. https://www.domain.com/google-translate-api
translationNode объект document.body HTML-элемент, требующий перевода. document.getElementById("#banner")
observeMutationsOn массив объектов [] Массив HTML-элементов, которые следует перевести в случае их изменения. [document.getElementById("#banner"), document.getElementById("#main-content") ]
excludeElements массив объектов [] Массив элементов, который не следует переводить. [document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]
sourceLanguage нить empty optional but recommended . Код языка BCP-47 входного текста, если он известен, например, «en-US» или «sr-Latn». Поддерживаемые коды языков перечислены в разделе «Языковая поддержка Google Cloud Translate». Если исходный язык не указан, API пытается автоматически определить исходный язык и возвращает исходный язык в ответе. en
targetLanguage нить empty required Код языка BCP-47, который будет использоваться для перевода входного текста, установлен на один из кодов языка, перечисленных в языковой поддержке Google Cloud Translate. fr

Поле выбора перевода

Ниже приведен пример поля выбора, содержащего все поддерживаемые языки с их кодами (по состоянию на 8 октября 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
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все