代码之家 › 专栏 › 技术社区 › sksallaj

使用Google网站转换器插件选择2-超出最大调用堆栈大小

jquery-select2 jquery javascript

sksallaj · 技术社区 · 7 年前

我已使用以下步骤将google网站翻译器包含在我的网站中:

https://translate.google.com/manager/website/

如果您不熟悉上述链接,它可以帮助您创建html和javascript位置,以显示下拉列表。我正在尝试向html和javascript(如下所述)添加自定义项。

为了保持我正在构建的站点的主题,我正在尝试更改下拉列表以使用select2插件。

$(window).load(function () {
    setTimeout(function () {

        $('.goog-te-combo').select2()
            .on('change', function (e) {
                //console.log($('.goog-te-combo').val());
                var event;

                event = document.createEvent('HTMLEvents');
                event.initEvent('change', true, true);
                document.getElementsByClassName('goog-te-combo')[0].dispatchEvent(event);
            });
    }, 1000);
});

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

以上代码有效,我可以让网站使用select2,包括autocomplete。

问题是,我超出了最大调用大小,这是因为我在一次又一次地创建递归调度更改事件。换句话说,在我的select2-on-change方法中,我将另一个更改事件分派到触发的同一元素,使循环发生。我很好奇,想知道是否有任何方法可以绕过这个问题,或者是否有任何其他方法可以让它在没有任何错误的情况下正常工作。

3 回复 | 直到 7 年前

sksallaj 7 年前

几个小时后,我决定隐藏google网站翻译器,并创建一个新的下拉列表select2选项,当我更改此下拉列表的值时,我会更改隐藏的google下拉列表的值。

所以我把这个藏了起来:

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

并创建了一个新的选择选项:

<select id="newGoogleTrans">
    <option disabled value="0">Select one</option>
    <option value="ar">Arabic</option>
    <option value="en">English</option>
    <option value="fr">French</option>
</select>

这就是我控制下拉列表的方式:

$('#newGoogleTrans')
    .select2()
    .on('change', function () {
        value =  $('#newGoogleTrans').val();
        $('.goog-te-combo').val(value );
        document.getElementsByClassName('goog-te-combo')[0].dispatchEvent(event);
     })

编辑:

我还意识到,下拉列表需要更新,以反映您之前是否选择了下拉列表,因为浏览器会以cookie的形式保存之前选择的google translate下拉列表的状态,所以为了更新select2下拉列表面:

var nameEQ = "googtrans=";
var cookieVal = "";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ')
        c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0)
        cookieVal = c.substring(nameEQ.length, c.length).split("/")[2];
}
cookieVal = cookieVal == "" ? 'en' : cookieVal;
$('#newGoogleTrans').val(cookieVal );

SauronZ 4 年前

当我将gtranslte select下拉菜单添加到移动菜单时,我的网站的移动版本也有同样的问题。

对我来说,解决问题的唯一方法是使用手动方法插入翻译菜单,而不是使用自动方法。

插入页脚。php Java脚本:

<script>
function GTranslateGetCurrentLang() {var keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf('goog-te-combo')!=-1){teCombo=sel[i];break;}if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
</script>

并在函数中创建新函数。用于将新元素添加到菜单的php文件:

// Filter wp_nav_menu() to add additional links and other output
function new_nav_menu_items($items) {
    $homelink = '<!-- GTranslate: https://gtranslate.io/ -->
 <select onchange="doGTranslate(this);" class="notranslate" id="gtranslate_selector" aria-label="Website Language Selector"><option value="">Select Language</option><option value="es|da">Dansk</option><option value="es|nl">Nederlands</option><option value="es|en">English</option><option value="es|fr">FranÃ§ais</option><option value="es|de">Deutsch</option><option value="es|it">Italiano</option><option value="es|es">EspaÃ±ol</option><option value="es|sv">Svenska</option></select><style>
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-text-highlight {background-color:transparent !important;box-shadow:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
</style>

<div id="google_translate_element2"></div>';
    // add the home link to the end of the menu
    $items = $items . $homelink;
    return $items;
}
add_filter( 'wp_nav_menu_items', 'new_nav_menu_items' );

最好的

Nat 3 年前

我在html中删除了此代码>它运行得很好,我想这个init函数在创建对象时是递归的。

  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement(
        {pageLanguage: 'en', autoDisplay: false},
        'app'
      );
    }
  </script>