不使用i18n实现多语言切换功能，添加谷歌翻译插件到你的网站大部分做网站多语言的都是通过 i18n 来做的，每一个字符串

大部分做网站多语言的都是通过 i18n 来做的，每一个字符串都要翻译成多种语言JSON文件，工作量实在大。尤其是涉及到后端数据在前端展示进行多语言翻译。利用谷歌翻译js插件前端实现多语言切换功能。

特性

使用 translate.google.cn 资源，大陆地区也能使用
自动判断浏览器语言
支持 Google 翻译支持的所有语言
隐藏谷歌翻译的样式，更美观
代码实现简洁，复制粘贴就能用

旧版代码

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

谷歌翻译组件 CSS样式重置、隐藏顶端的翻译选项

/* google translate */
.border {
    border-width: .0625rem;
}
.rounded {
    border-radius: .25rem;
}
.overflow-hidden {
    overflow: hidden;
}
.ml-2 {
    margin-left: .5rem;
}
#google_translate_element {
    overflow: hidden;
    border-width: 1px;
    border-radius: 0.25rem;
    background: white;
}
.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 {
    display: none !important;
    position: fixed !important;
}
.goog-te-gadget .goog-te-combo {
    font-size: .75rem!important;
    line-height: 1rem!important;
    margin: 0!important;
    outline: .125rem solid #0000!important;
    outline-offset: .125rem!important;
    padding: .25rem!important;
}

在你需要的地方添加入口 html

<div id="google_translate_element" class="ml-2 rounded border overflow-hidden"></div>

插件以cookie值自动翻译，以下利用js设置googtrans为空时添加值为/zh-CN/en（默认进去翻译成英文）
另外可以以链接hash设置翻译语言，如: 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";
}

新版代码

网页测试html代码

<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 () {});
    }
</script>

手动选择语言切换

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