Question

我正在使用以下谷歌提供的代码在我的某个网站上使用谷歌翻译小部件：

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

我的问题：翻译在页面加载后运行，但我也有一个脚本根据宽度自动调整主要导航元素的大小。

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

在运行代码以调整主导航大小之前，我尝试调用Google翻译代码，但翻译以异步方式运行，因此我的代码在翻译完成之前运行。

翻译完成后是否会引发回调事件（或某种方式来检测翻译完成时间），所以我可以在尝试调整导航大小之前等待？

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

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

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

Answer 3

您可以检测到以下更改：

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

缺点是该事件多次被启动，因为谷歌翻译在此过程中进行了多次更改。

建议检测页面上最后一个元素的更改，因为您知道上面的所有元素都已翻译。

Google Translate Widget - 翻译完整回调

3 个答案: