Изменить выпадающий список Google Translate программно

#javascript #jquery

#javascript #jquery

Вопрос:

На одном сайте я попытался добавить выпадающий список Google Translate, используя следующий код:

 function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}

<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  

Когда вы выбираете из выпадающего списка, который вставляет скрипт Google, вверху страницы появляется панель Google Translate, и весь текст переводится на выбранный язык.

Однако, если я попытаюсь вызвать изменение выпадающего списка с помощью JavaScript, это не сработает:

 $('.goog-te-combo').val('fr')
  

В выпадающем списке выбран «Французский», однако Google Translate не запускается.

Почему o почему это не работает? Я также пытался:

 $('.goog-te-combo').trigger('click')
$('.goog-te-combo').change()
  

ОБНОВЛЕНИЕ: К вашему сведению, это не мой сайт. Я использовал консоль Chrome для загрузки jQuery и выполнения методов jQuery.

Комментарии:

1. После проверки дерева DOM выпадающий список, добавленный Google script, не отображается в iframe.

2. Если вы добавите <div id="google_translate_element"></div> перед загрузкой скрипт, чтобы Google мог заполнить его дополнительным пользовательским интерфейсом , вы получите a select , который не является частью iframe . К сожалению, даже вызов триггеров событий для этих элементов также не запускает перевод (но выбранный элемент изменяется).

3. Возникла та же проблема: вы ее решили?

4. Это решено joeyend. Смотрите его комментарий

Ответ №1:

Ваш выпадающий список может вызвать перезагрузку страницы. Вы можете либо перезагрузить страницу с добавлением к URL-адресу #googtrans(en|ja) или #googtrans/en/ja , либо установить значение cookie googtrans равным /en/ja (где ja — пример выбранного целевого языка) перед перезагрузкой.

Ответ №2:

Я знаю, что это уже старая тема, но я просто хочу поделиться решением, с которым я столкнулся при запуске события изменения элемента Google translate select.

Добавьте функцию, которая будет использовать функцию dispatchEvent или fireEvent:

 function triggerHtmlEvent(element, eventName) {
var event;
if(document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventType = eventName;
    element.fireEvent('on'   event.eventType, event);
} }
  

после установки значения получите объект DOM для select (используя document.getElement …) и вызовите описанную выше функцию:

 triggerHtmlEvent(selectObject, 'change');
  

Комментарии:

1. Эй, я действительно заинтересован в этом решении, это именно то, что я искал в течение последних 3 дней. У вас случайно нет рабочей версии для этого, я думаю, что мне чего-то не хватает в «после установки значения получите объект DOM для выбора (используя document.getElement …)» Спасибо за вашу помощь

2. Я получаю ошибку: TypeError: element.dispatchEvent не является функцией

3. Я бы не рекомендовал использовать fireEvent для производства: «Это проприетарная альтернатива Microsoft Internet Explorer стандартному EventTarget.dispatchEvent()» ссылка: developer.mozilla.org/en-US/docs/Web/API/EventTarget/fireEvent

Ответ №3:

//чтобы получить текущий выбранный язык

 string language=Request.Cookies["googtrans"].Value
  

//чтобы установить желаемый язык

  Response.Cookies["googtrans"].Value = Your language;
  

//например: Ответ.Файлы cookie[«googtrans»].Значение = «/ru/ hi»;

Ответ №4:

Добавьте это в свой код:

 //to get currently selected language
string language=Request.Cookies["googtrans"].Value
//to set desired language
 Response.Cookies["googtrans"].Value = Your language;
//eg: Response.Cookies["googtrans"].Value = "/en/hi";
  

Ответ №5:

При просмотре вашей страницы оказывается, что jQuery не загружен, поэтому вы не сможете использовать $() функцию.

Вам нужно добавить ссылку на jQuery в свой <head></head> раздел, например:

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
  

Затем

 $('.goog-te-combo').val('fr');
  

должно сработать.

Комментарии:

1. Это имело бы смысл, если бы $('.goog-te-combo').val('fr') ничего не делалось, но OP говорит, что это изменяет выпадающий список.

2. Я понимаю это, но я взглянул на страницу и попытался запустить $('.goog-te-combo').val('fr'); в консоли и получил ошибку TypeError: Cannot call method 'val' of null . И поиск по источнику не приводит к появлению ссылок на jQuery . Так что либо он удалил jQuery с момента публикации этого вопроса, либо он никогда не работал (или, возможно, он запомнил ‘fr’ из предыдущего выбора, и OP ошибочно принял это за то, что он работает).

3. Я не думаю, что страница принадлежит OP. Я полагаю, что они пытаются взаимодействовать со страницей из внешнего домена… отсюда и проблема.

4. Ах … если это так, то да, межсайтовый скриптинг будет проблемой. Я интерпретировал вопрос как сайт, принадлежащий OP.

5. Извините за неясность. Это не мой сайт. Я загрузил jQuery в консоль и именно там запустил функции jQuery. Я планирую внедрить аналогичное решение на сайте, который я создаю.

Ответ №6:

Потратив довольно много времени на то, чтобы заставить это тоже работать, я внедрил плагин перевода jquery и смог довольно легко добиться всего, чего хотел, включая автоматический перевод на язык браузера при загрузке страницы и кликабельные языковые ссылки, флаги и т.д.

Подробная информация о плагине и загрузках находится здесь http://code.google.com/p/jquery-translate /

Комментарии:

1. Привет, этот плагин все еще работает? Я потратил несколько часов, пытаясь это сделать, но без особого удовольствия. Спасибо

Ответ №7:

Правильный способ использования я написал здесь. Google translate устанавливает функцию изменения с помощью выбора ‘select.goog-te-combo’, если вы используете только класс, JS не вызывает правильного прослушивателя. Способ @joeyend работает, потому что функция идентифицирует реальный «селектор».

 var trans = jQuery('select.goog-te-combo');
trans.val('fr')
trans.change();