javascript 如何添加触发翻译的谷歌翻译链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8330669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Google Translate link that triggers translation?
提问by ilhan
I have a web page in Bulgarian and I want my users be able to translate it one-click to English. Also there should not be any translation banner at the top of the page when a user enters to the page (it can after the user clicks the translation link). I have tried to use #googtrans(bg|en)(doc) but it didn't work, also it shows a banner at the top of the page due to this code:
我有一个保加利亚语网页，我希望我的用户能够一键将其翻译成英文。此外，当用户进入页面时，页面顶部不应有任何翻译横幅（用户单击翻译链接后可以）。我曾尝试使用#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)
(文档)
the code is here krumovgrad.euclick the flags at the right top.
代码在这里krumovgrad.eu单击右上角的标志。
回答by kiki
I had the same issue a few days ago and came up with a solution that works. I have a site in Spanish, and until we translate it into English, we offer our users the possibility of using Google Website Translator. When users click en English flag, it opens a Twitter Bootstrap modal telling the user the website hasn't been translated yet, and there's a button they can click to trigger the translation. I capture the event with JavaScript, set the cookie 'googtrans' with the value '/es/en' and reload the page. The Google's script does the rest. After the reload, I check if the cookie exists and change the English flag for the Spanish flag. When the user clicks on it, I set the cookie to '' (empty string), and reload the page.
几天前我遇到了同样的问题，并提出了一个有效的解决方案。我有一个西班牙语网站，在我们将其翻译成英语之前，我们为用户提供使用 Google 网站翻译器的可能性。当用户单击 en English 标志时，它会打开一个 Twitter Bootstrap 模式，告诉用户该网站尚未翻译，并且他们可以单击一个按钮来触发翻译。我使用 JavaScript 捕获事件，使用值 '/es/en' 设置 cookie 'googtrans' 并重新加载页面。剩下的由 Google 的脚本完成。重新加载后，我检查 cookie 是否存在并将英国国旗更改为西班牙国旗。当用户点击它时，我将 cookie 设置为 ''（空字符串），然后重新加载页面。
For simplicity's sake, I won't include the Bootstrap modal part.
为简单起见，我不会包括 Bootstrap 模态部分。
Html
html
<!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>
Javascript (script.js)
Javascript (script.js)
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');
}
});
In the Website Translator setup wizard, you can select the languages you want to appear in the list. You then can have your own <select>where each <option>has as the valuethe value of the cookie it should have, or an ordinary list with flags with something like data-cookie="value". Then with JavaScript you capture the 'change' event (for the select) or the 'click' event for the list, and set the cookie appropriately.
在网站翻译器设置向导中，您可以选择要显示在列表中的语言。然后，您可以拥有自己的<select>其中每个<option>都作为value它应该拥有的 cookie 的值，或者一个带有类似data-cookie="value". 然后使用 JavaScript 捕获 'change' 事件（对于选择）或列表的 'click' 事件，并适当地设置 cookie。
Note: I intentionally removed the div where the Website Translator gets rendered:
注意：我故意删除了呈现网站翻译器的 div：
<div id="google_translate_element"></div>
To see it working, you can visit www.viajoasalta.com; at least until we finally translate it.
要查看它的工作情况，您可以访问www.viajoasalta.com；至少在我们最终翻译它之前。
回答by vinnybad
Google has thought ahead my friend. Please look at this page: http://translate.google.com/translate_tools
我的朋友，谷歌提前考虑了。请看这个页面：http: //translate.google.com/translate_tools
EDIT: I'm sorry, I just realized you're using what the page provides! You can, with simple javascript, hide the elements that are displayed and create a link for English where it's onClick changes the value of the hidden select element...and your entire page is translated.
编辑：对不起，我刚刚意识到您正在使用页面提供的内容！您可以使用简单的 javascript 隐藏显示的元素并创建一个英文链接，它的 onClick 更改隐藏的选择元素的值......并且您的整个页面都被翻译。
It's a bit messy but it gets the job done and the user doesn't know it exists!
它有点乱，但它完成了工作，用户不知道它的存在！
You can also consider capturing the request that is sent to the google translate servers and capture the link that is called when you select English and just use that link.
您还可以考虑捕获发送到 google 翻译服务器的请求，并捕获选择英语时调用的链接并仅使用该链接。
Chrome has a nice utility to capture requests (see ctrl+shift+j for a developer console)
Chrome 有一个很好的工具来捕获请求（有关开发人员控制台，请参阅 ctrl+shift+j）
