ilh*_*han 6 javascript google-translate
我有一个保加利亚语网页,我希望我的用户能够一键翻译成英文.当用户进入页面时,页面顶部不应该有任何翻译横幅(可以在用户点击翻译链接后).我试图使用#googtrans(bg|en)(doc)但它不起作用,由于这段代码,它在页面顶部显示了一个横幅:
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'bg',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
(doc)
代码在这里krumovgrad.eu点击右上角的标志.
小智 9
几天前我遇到了同样的问题,并提出了一个有效的解决方案.我有一个西班牙语网站,在我们将其翻译成英文之前,我们为用户提供使用Google网站翻译的可能性.当用户单击en English flag时,它会打开一个Twitter Bootstrap模式,告诉用户该网站尚未翻译,并且有一个按钮可以单击以触发翻译.我使用JavaScript捕获事件,使用值'/ es/en'设置cookie'googtrans'并重新加载页面.谷歌的脚本完成剩下的工作.重新加载后,我检查cookie是否存在并更改西班牙国旗的英文标志.当用户点击它时,我将cookie设置为''(空字符串),然后重新加载页面.
为简单起见,我不会包含Bootstrap模态部分.
<!DOCTYPE html>
<html>
<head>
(...)
<meta name="google-translate-customization" content="(YOUR_TRANSLATE_CUSTOMIZATION_ID)" />
(...)
</head>
<body>
(...)
<a id="lang-change-en" class="lang-change" href="javascript:void(0);">
<img src="images/en-flag.png" alt="English Flag">
</a>
(...)
<script src="js/script.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
function setCookie(cname, cvalue, exdays) {
var expires;
if (exdays === 0) {
expires = '';
} else {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
expires = "expires=" + d.toGMTString();
}
var domain = (typeof domain === "undefined") ? '' : "; domain="+domain;
document.cookie = cname + "=" + cvalue + "; " + expires + "path=" + path + domain;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//Google provides this function
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
},'google_translate_element');
}
//Using jQuery
$(document).ready(function() {
$(document).on('click','#lang-change-en', function() {
setCookie('googtrans', '/es/en', 0, '.viajoasalta.com');
setCookie('googtrans', '', 0, '/');
location.reload();
});
$(document).on('click', '#lang-change-es', function() {
setCookie('googtrans', '', 0, '/', '.viajoasalta.com');
setCookie('googtrans', '', 0, '/');
location.reload();
});
var googTrans = getCookie('googtrans');
if (googTrans === '/es/en') {
var src = $('#lang-change-en > img').attr('src').replace('en-flag', 'es-flag');
$('#lang-change-en > img').attr('src', src);
$('#lang-change-en').attr('id', 'lang-change-es');
}
});
在"网站转换器"设置向导中,您可以选择要在列表中显示的语言.然后,您可以拥有自己的<select>位置<option>作为value它应具有的cookie的值,或者带有标记的普通列表data-cookie="value".然后使用JavaScript捕获列表的'change'事件(对于select)或'click'事件,并适当地设置cookie.
注意:我故意删除了网站转换器呈现的div:
<div id="google_translate_element"></div>
要查看它的工作原理,您可以访问www.viajoasalta.com ; 至少在我们最终翻译它之前.
我的朋友，谷歌已经提前考虑到了。请查看此页面： http: //translate.google.com/translate_tools
编辑：抱歉，我刚刚意识到您正在使用该页面提供的内容！您可以使用简单的 javascript 隐藏显示的元素并创建一个英语链接，其中 onClick 会更改隐藏选择元素的值...并且整个页面都会被翻译。
它有点混乱，但它完成了工作，而且用户不知道它的存在！
您还可以考虑捕获发送到谷歌翻译服务器的请求，并捕获当您选择英语并仅使用该链接时调用的链接。
Chrome 有一个很好的实用程序来捕获请求（请参阅 ctrl+shift+j 以获得开发者控制台）