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

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

解决方法

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

为简单起见,我不会包含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','.viajoasalta.com');
        setCookie('googtrans','','/');
        location.reload();
    });

    $(document).on('click','#lang-change-es','/','/');
        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>其中每个<选项>将value应该具有的值作为值,或者使用带有data-cookie =“value”之类的标志的普通列表.然后使用JavaScript捕获列表的’change’事件(对于select)或’click’事件,并适当地设置cookie.

注意：我故意删除了网站转换器呈现的div：

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

要看它工作,你可以访问www.viajoasalta.com;至少在我们最终翻译它之前.

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

解决方法

相关推荐