Change Google Translate dropdown programmatically

我怕爱的太早我们不能终老 提交于 2019-12-04 19:34:33

问题


On a site I tried adding the Google Translate dropdown using the following code:

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

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

When you select from the dropdown that the google script inserts, a Google Translate bar appears at the top of the page, and all text is translated in to the selected language.

However if I try and trigger the dropdown change using JavaScript, it doesn't work:

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

'French' is selected from the dropdown, however Google Translate is not triggered.

Why o why does it not work? I've also tried:

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

UPDATE: FYI this is not my site. I was using the Chrome console to load jQuery and execute the jQuery methods.


回答1:


You can have your dropdown trigger a page reload. You can either reload the page with #googtrans(en|ja) or #googtrans/en/ja appended to the URL, or set the googtrans cookie value to /en/ja (where ja is an example of the selected target language) before reloading.




回答2:


I know this is already an old topic, but I just wanna share the solution I came up with the issue on firing the google translate select element change event.

Add function that will use the dispatchEvent or fireEvent function:

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);
} }

after setting the value, get the DOM object for select (using document.getElement...) and call the function above:

triggerHtmlEvent(selectObject, 'change');



回答3:


//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";




回答4:


Add this to your code:

//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:


In looking at your page it appears that jQuery isn't loaded, so you won't be able to use the $() function.

You need to add a reference to jQuery in your <head></head> section, such as:

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

Then

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

should work.




回答6:


Having spent quite a lot of time trying to get this to work too, I implemented the jquery translation plugin and was able to achieve everything I wanted to do quite easily including automatic translate to browser language on page load and clickable language links, flags etc.

Details of the plugin and downloads are here http://code.google.com/p/jquery-translate/



来源:https://stackoverflow.com/questions/5569927/change-google-translate-dropdown-programmatically

工具导航Map

JSON相关