Google翻译:选择语言时回拨

Question

Google翻译:选择语言时回拨

我已将Google Translate插件添加到我的网页中.每当用户从插件添加到我的网页的下拉菜单中选择一种语言时,如何才能获得JavaScript函数的回调？Google Translate API文档似乎没有任何相关信息.我已经阅读了Google Translate插件的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cod*_*igo 7

谢谢你的回复.根据上述回复中引用的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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Fel*_*sma 0

从这个问题来看，这段代码似乎可以工作：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，5 月前
查看次数：	7579 次
最近记录：	6 年，8 月前