#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 мог заполнить его дополнительным пользовательским интерфейсом , вы получите aselect
, который не является частью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();