How to add Google Translate link that triggers translation?

后端未结

关注

 2  708

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

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');
    }
});

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". Then with JavaScript you capture the 'change' event (for the select) or the 'click' event for the list, and set the cookie appropriately.

Note: I intentionally removed the div where the Website Translator gets rendered:

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

To see it working, you can visit www.viajoasalta.com; at least until we finally translate it.

0 讨论(0)

慢半拍i

2021-01-02 22:31

Google has thought ahead my friend. Please look at this page: 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.

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.

Chrome has a nice utility to capture requests (see ctrl+shift+j for a developer console)

0 讨论(0)
发布评论:

提交评论
- 加载中...