记录|给网站添加谷歌多语言翻译插件

首页 > 笔记

作者：jaz

时间： 2021年10月6日 11:56

字数：5743 个

字号：小中大

评论：3 条

浏览：18172 次

百度：百度已收录

分类：笔记

时间：2021-10-6 11:56 热度：18172° 评论：3 条

粗略记录一下

谷歌翻译的js，

因为会加载几个域名google.com的gif请求不到的严重拖慢网页翻译，没想到好办法

<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            {
                // pageLanguage: 'zh-CN',
                // 需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
                includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es,th,vi',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                // 自动显示翻译横幅，就是翻译后顶部出现的那个
                autoDisplay: true,
                // 还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
            },
            'google_translate_element' // 触发元素的id
        );
    }
</script>

//右下角切换语言
<div id="google_translate_element" style="position:fixed;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>

//css隐藏顶端的翻译选项
<style>.goog-te-banner-frame{display: none;}body{top: 0px !important;}</style>

插件以cookie值自动翻译，以下利用js设置googtrans为空时添加值为/zh-CN/en（默认进去翻译成英文）

另外可以以链接hash设置翻译语言，如:

https://xxx.com#googtrans(zh-CN|ja)

function getck(name) {
    var cookie_start = document.cookie.indexOf(name);
    var cookie_end = document.cookie.indexOf(";", cookie_start);
    if (cookie_start == -1) {
        return '';
    } else {
        var v = document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length));
        return unescape(v);
    }
}
if (getck("googtrans") == '') {
        document.cookie = "googtrans=/zh-CN/en";
}

新版的js，还没研究，下面设置默认自动翻译成一种语言，没有切换选项

<script type="text/javascript" src="https://translate.google.cn/translate_a/element.js?cb=gtElInit&amp;client=wt"></script>
<script type="text/javascript">
var gtElInit = function gtElInit() {
    var lib = new google.translate.TranslateService();
    lib.translatePage('zh-cn', 'en', function () {});
}
</script>

考虑用法

<div style="text-align:center;"><p>翻译演示<p>
<button onclick="change(this);"  value="">中文</button>
<button onclick="change(this);"  value="en">英文</button>
<button onclick="change(this);"  value="ja">日文</button>

<select id="select" onchange="change(this)" class="adres-input">
	<option value="">中文</option>
	<option value="en">英文</option>
	<option value="ja">日文</option>
	<option value="ko">韩文</option>
	<option value="ru">俄文</option>
</select>
</div>

<script type="text/javascript" src="https://translate.google.cn/translate_a/element.js?cb=gtElInit&amp;client=wt"></script>
<script>
//var gtElInit = function gtElInit() {
//    var lib = new google.translate.TranslateService();
//    lib.translatePage('zh-cn', 'en', function () {});
//}
function change(obj) {
    var lang = obj.value;
    var lib = new google.translate.TranslateService();
    lib.translatePage('zh-cn', lang, function () {});
}
</script>

翻译接口

不需要提供 tk 参数，client 类型里 t 和 webapp 需要，at 和 gtx 不需要

curl 'https://translate.google.com/translate_a/single?client=at&sl=zh-CN&tl=en&dt=t&q=%E6%88%91%E6%98%AF%E5%B8%85%E9%80%BC'

curl 'https://translate.google.com/translate_a/single?client=gtx&sl=zh-CN&tl=en&dt=t&q=%E6%88%91%E6%98%AF%E5%B8%85%E9%80%BC'