Select2 with Google Website Translator Plugin - 超出最大调用堆栈大小

Question

我已经在我的网站上包含了谷歌网站翻译器，使用以下步骤显示在下面的网站上：

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，包括自动完成。

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

Answer 1

几个小时后，我决定隐藏谷歌网站翻译器，并创建一个新的下拉列表 select2 选项，当我更改此下拉列表的值时，我更改了隐藏的谷歌下拉菜单的值。

所以我隐藏了这个：

<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 的形式保存了之前选择的谷歌翻译下拉菜单的状态，因此为了更新 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 );

Answer 2

在将 gtranslte 选择下拉菜单添加到移动菜单时，我的网站的移动版本遇到了同样的问题。

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

插入到页脚中.php Javascripts：

<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' );

最好。

Answer 3

我在 html>head 上删除了这段代码，它运行良好，我想这个 init 函数在创建对象时是递归的。

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