如何添加触发翻译的谷歌翻译链接？

Question

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.eu click the flags at the right top.代码在这里krumovgrad.eu点击右上角的标志。

Answer 1

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.我有一个西班牙语网站，在我们将其翻译成英语之前，我们为用户提供使用 Google 网站翻译器的可能性。 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.当用户单击 en English 标志时，它会打开一个 Twitter Bootstrap 模式，告诉用户该网站尚未翻译，并且他们可以单击一个按钮来触发翻译。 I capture the event with JavaScript, set the cookie 'googtrans' with the value '/es/en' and reload the page.我使用 JavaScript 捕获事件，使用值 '/es/en' 设置 cookie 'googtrans' 并重新加载页面。 The Google's script does the rest.剩下的由 Google 的脚本完成。 After the reload, I check if the cookie exists and change the English flag for the Spanish flag.重新加载后，我检查 cookie 是否存在并更改西班牙国旗的英国国旗。 When the user clicks on it, I set the cookie to '' (empty string), and reload the page.当用户点击它时，我将 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 value the value of the cookie it should have, or an ordinary list with flags with something like data-cookie="value" .然后，您可以有自己<select>其中每个<option>具有与value饼干它应该有，或者与类似标志的普通表的价值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.然后使用 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 ;要查看它的工作情况，您可以访问www.viajoasalta.com ； at least until we finally translate it.至少在我们最终翻译它之前。

Answer 2

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）

Answer 3

For example, your web URI is http://localhost/cars/index.php例如，您的 Web URI 是 http://localhost/cars/index.php

by changing it to通过将其更改为

http://localhost/cars/index.php#googtrans(fr) http://localhost/cars/index.php#googtrans(fr)

will translate the page to French with a google-translate-iframe on top将页面翻译成法语，顶部有一个 google-translate-iframe

To disable the iframe banner, add the following code in page CSS要禁用 iframe 横幅，请在页面 CSS 中添加以下代码

.goog-te-banner-frame {
    display: none;
}

Please refer to Sibin John Mattappallil's answer to this question请参考Sibin John Mattappallil 对这个问题的回答

如何添加触发翻译的谷歌翻译链接？

问题描述

3 个解决方案

解决方案1
10 2014-03-23 15:34:56

Html html

Javascript (script.js) Javascript (script.js)

解决方案2
1 2011-11-30 18:20:01

解决方案3
-1 2021-01-07 03:38:32

如何添加触发翻译的谷歌翻译链接？

问题描述

3 个解决方案

解决方案1 10 2014-03-23 15:34:56

Html html

Javascript (script.js) Javascript (script.js)

解决方案2 1 2011-11-30 18:20:01

解决方案3 -1 2021-01-07 03:38:32

解决方案1
10 2014-03-23 15:34:56

解决方案2
1 2011-11-30 18:20:01

解决方案3
-1 2021-01-07 03:38:32