Google Translate Widget -翻译完成回调

Question

我在我的一个站点上使用google translate小部件，其中包含以下google提供的代码：

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', 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>

<script>

我的问题是: translate在页面加载后运行，但我还有一个脚本可以根据主要导航元素的宽度自动调整它们的大小。

这在翻译完成之前运行，因此它会根据未翻译的英文标签调整大小。一旦翻译更改了导航措辞，导航元素就需要调整大小以适应新翻译的单词，因为它们的大小(宽度)可能与英语不同。

我曾尝试在运行代码之前调用Google translate代码来调整主导航的大小，但是translate是异步运行的，所以我的代码在translate完成之前就运行了。

翻译完成时是否会引发回调事件(或者以某种方式检测翻译何时完成)，以便我可以在尝试调整导航大小之前等待？

此外，我需要在页面完成翻译后运行脚本。

Answer 1

以下是我最终使用的修复方法：

jQuery(function(){
    firstMenu = $("#nav li:first").text();

    setTimeout(waitNav, 500);
});

function waitNav() {

    if (firstMenu != $('#nav li:first').text()) {

        initNav();
        firstMenu = $('#nav li:first').text();
        setTimeout(waitNav, 500);

    }
    else {
        setTimeout(waitNav, 500);
    }

}

基本上，不断检查一段已知文本是否已更改(在本例中，它是导航块中的第一项)。

如果它发生了变化，这意味着转换器已经运行，那么在转换之后运行您需要运行的代码(这里是initNav())。

如果用户选择了另一种语言，我会一直检查更改。

它不是完美的，但它对我来说是有效的:-)

Answer 2

您可以检测到如下更改：

$('#some-translatable-element').bind('DOMSubtreeModified', function() {
  yourCallback();
});

缺点是该事件被多次触发，因为google翻译在该过程中进行了多次更改。

一个建议是检测页面上最后一个元素的变化，因为这样你就知道上面的所有元素都被翻译了。

Answer 3

$( document ).ready(function() {
    $('#google_translate_element').bind('DOMSubtreeModified', function() {
        var val = $(this);
        var strlang = "" + val[0].innerText + "";
        console.log(strlang); // print your selected language in console
    });
});