特性

  • 使用 translate.google.cn 资源，大陆地区也能使用
  • 自动判断浏览器语言
  • 支持 Google 翻译支持的所有语言
  • 隐藏谷歌翻译的样式，更美观

index.html

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demo</title>
	<link id="giscus-css" rel="stylesheet" href="./styles.css">
	<script async src="./translate-google.js"></script>
</head>
	<body>

		<div id="google_translate_element"></div>
		hello world!

	</body>
</html>

styles.css

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
#google_translate_element {
    overflow: hidden;
    border-width: 1px;
    border-radius: 0.25rem;
}

.goog-te-gadget {
    font-size: 0 !important;
}

.goog-te-combo {
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}
.goog-logo-link {
    display: none !important;
}
.goog-te-banner-frame {
    position: fixed !important;
}

translate-google.js

  • 001
  • 002
  • 003
  • 004
  • 005
  • 006
  • 007
  • 008
  • 009
  • 010
  • 011
  • 012
  • 013
  • 014
  • 015
  • 016
  • 017
  • 018
  • 019
  • 020
  • 021
  • 022
  • 023
  • 024
  • 025
  • 026
  • 027
  • 028
  • 029
  • 030
  • 031
  • 032
  • 033
  • 034
  • 035
  • 036
  • 037
  • 038
  • 039
  • 040
  • 041
  • 042
  • 043
  • 044
  • 045
  • 046
  • 047
  • 048
  • 049
  • 050
  • 051
  • 052
  • 053
  • 054
  • 055
  • 056
  • 057
  • 058
  • 059
  • 060
  • 061
  • 062
  • 063
  • 064
  • 065
  • 066
  • 067
  • 068
  • 069
  • 070
  • 071
  • 072
  • 073
  • 074
  • 075
  • 076
  • 077
  • 078
  • 079
  • 080
  • 081
  • 082
  • 083
  • 084
  • 085
  • 086
  • 087
  • 088
  • 089
  • 090
  • 091
  • 092
  • 093
  • 094
  • 095
  • 096
  • 097
  • 098
  • 099
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
(function () {
    var gtConstEvalStartTime = new Date();
    var h = this || self,
        l = /^[\w+/_-]+[=]{0,2}$/,
        m = null;
    function n(a) {
        return (a = a.querySelector && a.querySelector("script[nonce]")) && (a = a.nonce || a.getAttribute("nonce")) &&
            l.test(a) ? a : ""
    }
    function p(a, b) {
        function c() {}
        c.prototype = b.prototype;
        a.i = b.prototype;
        a.prototype = new c;
        a.prototype.constructor = a;
        a.h = function (g, f, k) {
            for (var e = Array(arguments.length - 2), d = 2; d < arguments.length; d++) e[d - 2] = arguments[d];
            return b.prototype[f].apply(g, e)
        }
    }
    function q(a) {
        return a
    };
    function r(a) {
        if (Error.captureStackTrace) Error.captureStackTrace(this, r);
        else {
            var b = Error().stack;
            b && (this.stack = b)
        }
        a && (this.message = String(a))
    }
    p(r, Error);
    r.prototype.name = "CustomError";
    function u(a, b) {
        a = a.split("%s");
        for (var c = "", g = a.length - 1, f = 0; f < g; f++) c += a[f] + (f < b.length ? b[f] : "%s");
        r.call(this, c + a[g])
    }
    p(u, r);
    u.prototype.name = "AssertionError";
    function v(a, b) {
        throw new u("Failure" + (a ? ": " + a : ""), Array.prototype.slice.call(arguments, 1));
    };
    var w;
    function x(a, b) {
        this.g = b === y ? a : ""
    }
    x.prototype.toString = function () {
        return this.g + ""
    };
    var y = {};
    function z(a) {
        var b = document.getElementsByTagName("head")[0];
        b || (b = document.body.parentNode.appendChild(document.createElement("head")));
        b.appendChild(a)
    }
    function _loadJs(a) {
        var b = document;
        var c = "SCRIPT";
        "application/xhtml+xml" === b.contentType && (c = c.toLowerCase());
        c = b.createElement(c);
        c.type = "text/javascript";
        c.charset = "UTF-8";
        if (void 0 === w) {
            b = null;
            var g = h.trustedTypes;
            if (g && g.createPolicy) {
                try {
                    b = g.createPolicy("goog#html", {
                        createHTML: q,
                        createScript: q,
                        createScriptURL: q
                    })
                } catch (t) {
                    h.console && h.console.error(t.message)
                }
                w = b
            } else w = b
        }
        a = (b = w) ? b.createScriptURL(a) : a;
        a = new x(a, y);
        a: {
            try {
                var f = c && c.ownerDocument,
                    k = f && (f.defaultView || f.parentWindow);
                k = k || h;
                if (k.Element && k.Location) {
                    var e = k;
                    break a
                }
            } catch (t) {}
            e = null
        }
        if (e && "undefined" != typeof e.HTMLScriptElement && (!c || !(c instanceof e.HTMLScriptElement) && (c instanceof e
                .Location || c instanceof e.Element))) {
            e = typeof c;
            if ("object" == e && null != c || "function" == e) try {
                var d = c.constructor.displayName || c.constructor.name || Object.prototype.toString.call(c)
            } catch (t) {
                d = "<object could not be stringified>"
            } else d = void 0 === c ? "undefined" : null === c ? "null" : typeof c;
            v("Argument is not a %s (or a non-Element, non-Location mock); got: %s",
                "HTMLScriptElement", d)
        }
        a instanceof x && a.constructor === x ? d = a.g : (d = typeof a, v(
            "expected object of type TrustedResourceUrl, got '" + a + "' of type " + ("object" != d ? d : a ?
                Array.isArray(a) ? "array" : d : "null")), d = "type_error:TrustedResourceUrl");
        c.src = d;
        (d = c.ownerDocument && c.ownerDocument.defaultView) && d != h ? d = n(d.document) : (null === m && (m = n(
            h.document)), d = m);
        d && c.setAttribute("nonce", d);
        z(c)
    }
    function _loadCss(a) {
        var b = document.createElement("link");
        b.type = "text/css";
        b.rel = "stylesheet";
        b.charset = "UTF-8";
        b.href = a;
        z(b)
    }
    function _isNS(a) {
        a = a.split(".");
        for (var b = window, c = 0; c < a.length; ++c)
            if (!(b = b[a[c]])) return !1;
        return !0
    }
    function _setupNS(a) {
        a = a.split(".");
        for (var b = window, c = 0; c < a.length; ++c) b.hasOwnProperty ? b.hasOwnProperty(a[c]) ? b = b[a[c]] : b =
            b[a[c]] = {} : b = b[a[c]] || (b[a[c]] = {});
        return b
    }
    window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener(
        "DOMContentLoaded",
        function () {
            document.readyState = "complete"
        }, !1);
    if (_isNS('google.translate.Element')) {
        return
    }(function () {
        var c = _setupNS('google.translate._const');
        c._cest = gtConstEvalStartTime;
        gtConstEvalStartTime = undefined;
        c._cl = navigator.language || navigator.userLanguage;
        c._cuc = 'googleTranslateElementInit';
        c._cac = '';
        c._cam = '';
        c._ctkk = '449649.3822363247';
        var h = 'translate.googleapis.com';
        var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
        var b = s + h;
        c._pah = h;
        c._pas = s;
        c._pbi = b + '/translate_static/img/te_bk.gif';
        c._pci = b + '/translate_static/img/te_ctrl3.gif';
        c._pli = b + '/translate_static/img/loading.gif';
        c._plla = h + '/translate_a/l';
        c._pmi = b + '/translate_static/img/mini_google.png';
        c._ps = b + '/translate_static/css/translateelement.css';
        c._puh = 'translate.google.cn';
        _loadCss(c._ps);
        _loadJs(b + `/translate_static/js/element/main_${navigator.language || navigator.userLanguage}.js`);
    })();
})();

function googleTranslateElementInit(){
    new google.translate.TranslateElement({
        pageLanguage: 'zh-CN',
        includedLanguages: 'zh-CN,af,ga,sq,it,ar,ja,az,kn,eu,ko,bn,la,be,lv,bg,lt,ca,mk,ms,zh-TW,mt,hr,no,cs,fa,da,pl,nl,pt,en,ro,eo,ru,et,sr,tl,sk,fi,sl,fr,es,gl,sw,ka,sv,de,ta,el,te,gu,th,ht,tr,iw,uk,hi,ur,hu,vi,is,cy,id,yi',
        autoDisplay:false
    },'google_translate_element');
}

Enjoy！