HTML

Question

我有一个保加利亚语网页，我希望我的用户能够一键翻译成英文。当用户进入页面时，页面顶部不应该有任何翻译横幅（可以在用户点击翻译链接后）。我曾尝试使用#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点击右上方的标记。

Answer 1

几天前我遇到了同样的问题，并提出了一个有效的解决方案。我有一个西班牙语网站，在我们将其翻译成英文之前，我们为用户提供使用Google网站翻译的可能性。当用户点击英文标志时，它会打开一个Twitter Bootstrap模式，告诉用户该网站尚未翻译，并且他们可以点击一个按钮来触发翻译。我使用JavaScript捕获事件，设置cookie＆＃39; googtrans＆＃39;价值＆＃39; / es / en＆＃39;并重新加载页面。谷歌的脚本完成剩下的工作。重新加载后，我检查cookie是否存在并更改西班牙国旗的英文标志。当用户点击它时，我会将Cookie设置为＆＃39;＆＃39;＆＃39; （空字符串），然后重新加载页面。

为了简单起见，我不会包含Bootstrap模态部分。

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）

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，您可以捕获＆＃39;更改＆＃39;事件（对于选择）或“点击”＃39;列表的事件，并适当地设置cookie。

注意：我故意删除了网站翻译器呈现的div：

<div id="google_translate_element"></div>

要查看它有效，您可以访问www.viajoasalta.com;至少在我们最终翻译它之前。

Answer 2

谷歌已经考虑过了我的朋友。请查看此页面：http://translate.google.com/translate_tools

编辑：对不起，我刚刚意识到你正在使用页面提供的内容！您可以使用简单的javascript隐藏显示的元素并为英语创建链接，其中onClick会更改隐藏的选择元素的值...并且您的整个页面都会被翻译。

它有点乱，但它完成了工作，用户不知道它存在！

您还可以考虑捕获发送到Google翻译服务器的请求，并捕获在您选择英语时使用该链接时调用的链接。

Chrome有一个很好的实用程序来捕获请求（请参阅ctrl + shift + j以获取开发人员控制台）

Answer 3

例如，您的 Web URI 是 http://localhost/cars/index.php

将其更改为

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

将页面翻译成法语，顶部带有 google-translate-iframe

要禁用 iframe 横幅，请在页面 CSS 中添加以下代码

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

请参考Sibin John Mattappallil's answer to this question

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

3 个答案:

HTML

Javascript（script.js）