检测谷歌网站翻译器语言更改

Question

我在我的网站上使用Google网站翻译器，让用户可以实时翻译网站。使用以下代码：

    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,el,en,es,fr,it,ja,ko,nl,ru,zh-CN', layout: google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT}, 'google_translate_element');
    }

这个很好用，现在我需要知道用户实际选择了哪种语言。我想检测用户手动选择语言和翻译器自动翻译时的情况，因为它可以根据浏览器设置启用自动翻译。

我想要做的是添加一个事件监听器来检测语言何时改变。即不仅当用户手动设置语言时，而且每次翻译器进行翻译时都要检测。例如，在翻译开始或结束或页面“刷新”以显示新语言时。

我需要收集此信息并将其发送到服务器以了解以后向用户发送电子邮件时要使用哪种语言。由于这些信息是从多个位置收集的，我不想在每次需要该信息时手动检查所选语言，而是添加一个事件监听器，检测语言更改并触发一个AJAX方法将信息保存在服务器上的会话中。

谢谢！

- Martin

Answer 1

当用户手动选择一种语言（更改下拉框的值）时，您可以使用以下代码获取所选语言：

$('.goog-te-combo').on('change',function(){
       language = $("select.goog-te-combo option:selected").text();
        alert(language);
    });

如果您的页面刷新并且翻译器翻译了您的页面，您可以使用setTimeout获取当前正在使用的语言。这不是完美的，但肯定会有所帮助.. :)

Fiddle

- Outlooker

---

谢谢您的回答。我也通过 $('body').on('change', '#google_translate_element select', updateLanguage); 实现了这个功能，并在 updateLanguage 方法中通过 $('#google_translate_element select').val() 检索值。 这很好用，但是我想找到一种方法来监听翻译器更新页面时引发的事件。 - Martin

当我使用 @Blizwire 提到的方法 $('body').on('change', '#google_translate_element select', updateLanguage); 时，效果很好。当页面刷新以获取当前语言时，我选择读取由 Google 翻译插件存储的 cookie "googtrans"。 - chris

Answer 2

您可以使用 setInterval 定期检查语言是否已更改：

var translatedText='';
var interval=setInterval(function(){
   var el=document.getElementsByClassName('goog-te-menu-value')[0];  
   if(el && el.innerText!==translatedText){
        translatedText=el.innerText;
        console.log('changed');
    }
},200);

Working JS Bin: http://jsbin.com/neteqihage/1/

- Max Heiber