2

过去几天我一直在做这个，感觉我很接近，但我错过了一些东西。我想要完成的是当用户从谷歌翻译小部件中选择一种语言时显示一个模式弹出窗口。

由于用户可以选择的语言在 dom 加载后由 javascript 小部件添加的 iframe 内，因此我使用 setInterval 检查 iframe 何时可用（出于某种原因，jquery 的 .load() 函数对我永远不起作用）。我还有另一个 setInterval 方法来检查语言类何时加载（当 iframe 可用时它们不会立即可用）。

当我将点击事件绑定到语言元素时，一切都按预期工作......一次......对于单击的任何元素。如果我删除clearInterval(waitForLanguageLinks)，那么每次都按预期工作，但这会导致内存泄漏并且页面最终崩溃（正如人们所期望的那样）。

所以我的问题是......如何在setInterval()回调中将点击事件绑定到这些元素中的每一个，并在调用后保持该事件的绑定clearInterval()（希望这是有道理的）。

$(document).ready(function(){

    var iframe;
    var languageElements;

    var translateIframeCheck = setInterval(function(){

        iframe = $('.goog-te-menu-frame').contents();

        if(iframe.length > 0){

            clearInterval(translateIframeCheck);

        }

    }, 100);

    var waitForLanguageLinks = setInterval(function(){

        languageElements = iframe.find('.goog-te-menu2-item');

        if(typeof iframe !== "undefined" && languageElements.length > 0){

            languageElements.click(function(){

                console.log($(this).find('.text').html());

            });

            clearInterval(waitForLanguageLinks);

        }

    }, 100);    

});

谷歌脚本加载的 iframe 进行翻译：

<iframe class="goog-te-menu-frame skiptranslate" title="Language Translate Widget" style="visibility: visible; box-sizing: content-box; width: 1004px; height: 285px; left: 413.5px; top: 167px;" frameborder="0"></iframe>
4

1 回答 1

1

根据@Taplar 的建议，使用委托事件绑定已经解决了这个问题。以下代码演示了如何从谷歌翻译下拉列表中获取所选语言并将其登录到控制台。对于将来偶然发现这个问题的任何人来说，这应该是一个很好的起点。

<!-- BEGIN GOOGLE TRANSLATE
---------------------------------------------------------------------->

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div id="google_translate_element"></div>
<script type="text/javascript">     
function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>

<script>
/*
    Keep in mind:
        > If google ever changes the structure of the translate element, this code
            will no longer function, and will have to be updated to reflect those
            changes.
        > There appears to be a bug in the translation widget itself where if
            a langauge other than the default langauge is chosen and the page is
            translated, then the default language is chosen again, then another
            langauge is chosen, nothing will happen, and the language must be
            selected a second time. 
*/


$(document).ready(function(){

    var iframe;

    var translateIframeCheck = setInterval(function(){

        iframe = $('.goog-te-menu-frame').contents();

        if(iframe.length > 0){


            $(iframe).on("click", ".goog-te-menu2 table tbody tr td a", function(){

                console.log($(this).find('.text').html());

            });

            clearInterval(translateIframeCheck);

        }

    }, 100);


});


</script>
<!----------------------------------------------------------------------
END GOOGLE TRANSLATE -->
于 2018-02-22T16:48:50.517 回答