我已使用以下网站中显示的以下步骤在我的网站上添加了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,包括自动完成。
问题是,我超出了最大通话大小,这是因为我一遍又一遍地创建递归调度更改事件。换句话说,在我的select2 on change方法中,我将另一个更改事件分派给触发的同一元素,从而使循环发生。我很想知道是否还有解决这个问题的方法,或者是否有任何其他方法可以让它在没有任何错误的情况下运行。
答案 0 :(得分:0)
几个小时后,我决定隐藏谷歌网站翻译,并创建一个新的下拉选择2选项,当我更改此下拉列表的值时,我更改隐藏的谷歌下拉列表的值。
所以我隐藏了这个:
<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 );