Google Translate:选择语言时的回调
Google Translate:选择语言时的回调
提问于 2016-07-01 03:05:51
我已经在我的网页上添加了谷歌翻译插件。当用户从插件添加到我的网页中的下拉菜单中选择一种语言时，我如何获得对JavaScript函数的回调？Google Translate API文档似乎没有任何关于这方面的信息。我已经通读了谷歌翻译插件的JavaScript代码，但我看不到任何有帮助的东西。
如果在我的网页翻译开始之前，或者在我的网页翻译结束之后，或者在我的网页中的任何特定元素翻译之前或之后，我得到一个对我的函数的回调，这也是很好的。
以下是我的网页的简化版本的HTML：
<html>
<head>
</head>
<body>
<!-- Google Website Translator plugin -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div>
<p>This part can be translated using the Google Translator plugin.</p>
</div>
<script type="text/javascript">
function translationCallback() {
// This function needs to be called when Google translates this web page.
alert("A language was selected from the Google Translator plugin dropdown");
}
</script>
</body>
</html>回答 4
Stack Overflow用户
发布于 2016-07-01 07:00:03
感谢您的回复。根据上面回复中提到的SO问题的答案和注释，我拼凑了以下适用于我的代码。
我为它的DOMSubtreeModified事件添加了一个隐藏的div和一个侦听器。当Google翻译隐藏div的内容时，监听程序会被调用。但是，每次从插件下拉菜单中选择一种语言时，侦听器都会被多次调用。谷歌似乎在多次过关。innerHTML的原始值似乎在除最后一次之外的所有过程中都作为子字符串保留。因此，我在事件处理程序中检查原始的innerHTML子字符串，以避免多次执行代码。
在下拉菜单中为innerHTML选择不同于每种语言的初始值。“英语”对我来说很管用。
<html>
<head>
</head>
<body>
<!-- Google Website Translator plugin -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div>
<p>This part can be translated using the Google Translator plugin.</p>
</div>
<div id="translationDetector" style="display:none;">English</div>
<script type="text/javascript">
var origValue = document.getElementById("translationDetector").innerHTML;
document.getElementById("translationDetector").addEventListener("DOMSubtreeModified", translationCallback, false);
function translationCallback() {
// This function needs to be called when Google translates this web page.
var currentValue = document.getElementById("translationDetector").innerHTML;
if (currentValue && currentValue.indexOf(origValue) < 0) {
origValue = currentValue;
alert("There is a disturbance in the force: " + currentValue);
}
}
</script>
</body>
</html>Stack Overflow用户
发布于 2019-03-22 22:52:09
谷歌翻译js使用cookie来跟踪当前的语言选择。您可以设置一个超时来监视对cookie的更改。
下面是我是如何为Drupal实现的，适用于任何javascript框架：
Drupal.exampleLanguageChanged = function() {
if (Drupal.exampleGetCookie('googtrans') != cookieValue) {
cookieValue = Drupal.exampleGetCookie('googtrans');
console.log('cookie changed ' + cookieValue);
}
setTimeout(Drupal.exampleLanguageChanged, 500);
};
Drupal.exampleGetCookie = function(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length >= 2) {
return parts.pop().split(";").shift();
}
return '';
};
Drupal.behaviors.exampleSimpleTranslation = {
attach: function(context) {
cookieValue = Drupal.exampleGetCookie('googtrans');
console.log('cookie value ' + cookieValue);
setTimeout(Drupal.exampleLanguageChanged, 500);
}
};
Stack Overflow用户
发布于 2016-07-01 03:12:55
从 SO问题看，这段代码似乎是有效的：
var $textfield = find("#google-translate");
var $popup = find("#google_translate_element");
var $select = $popup.find("select");
$textfield.click(function () {
$popup.fadeIn("fast");
return false;
});
$select.bind("change", function () {
$popup.fadeOut("fast");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38131369
复制相关文章
相似问题
腾讯云开发者
