Google翻译小部件出现两次

Posted 2021-05-02

我有一个使用谷歌翻译小部件的响应式网站。奇怪的是，有一段时间小部件现在出现两次，这似乎与响应式设计有关，因为如果我将相同的小部件代码放在一个简单的html页面上，它只出现一次。我不知道如何解决这个问题。有人遇到过这个吗？

更新。

我发现这是由jquery.themepunch.showbizpro.min.js引起的，如果我删除那个小部件只出现一次。我还没有办法解决这个问题，但可能有办法。我找到了这段代码。

<script>
function googleTranslateElementInit() {
    new google.translate.TranslateElement(
        { pageLanguage: 'sv' },
        'google_translate_element'
    );

    /*
        To remove the "powered by google",
        uncomment one of the following code blocks.
        NB: This breaks Google's Attribution Requirements:
        https://developers.google.com/translate/v2/attribution#attribution-and-logos
    */

    // Native (but only works in browsers that support query selector)
    if(typeof(document.querySelector) == 'function') {
        document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
        document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
    }

    //If you have jQuery - works cross-browser - uncomment this
    jQuery('.goog-logo-link').css('display', 'none');
    jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>

这段代码删除了徽标，所以我想如果我使用javascript我可以检查并删除重复出现的<select class="goog-te-combo">然后我只剩下一个，这可能吗？

答案

这发生在我身上使用Bootstrap。我有两个Google Translate代码实例 - 一个用于较大屏幕尺寸的实例，另一个用于较小屏幕的实例。无论屏幕尺寸如何，都显示出来。像visible-xs和hidden-xs这样的引导类似乎不会影响Google Translate按钮的显示。

另一答案

在RoR上遇到同样的问题。使用turbolinks兑现页面导致的问题。我通过弃用兑现所有链接来解决它（当脚本加载时将attr“data-turbolinks =”false“添加到body-tag）

另一答案

大家好！我有同样的问题，我知道这不是最好的做法，但我用CSS修复它只是添加溢出：隐藏和右边框。

它直观地解决了问题，直到我们得到一个解决方案并真正节省了潜入JS文件的时间。希望它也适合你。干杯!

另一答案

您可以设置一个全局计数器，并确保它只被调用一次。

<div id="google_translate_element"></div>

<script type="text/javascript">

    var duplicate_google_translate_counter = 0;//this stops google adding button multiple times

    function googleTranslateElementInit() {
       if (duplicate_google_translate_counter == 0) {
          new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
       }
       duplicate_google_translate_counter++;
    }

</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>