How to add Google Translate link that triggers translation?

后端未结

关注

 2  709

礼貌的吻别 2021-01-02 21:57

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

2条回答

一整个雨季 (楼主)

2021-01-02 22:24
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.

For simplicity's sake, I won't include the Bootstrap modal part.

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
提交评论

How to add Google Translate link that triggers translation?

Html

Javascript (script.js)