网页嵌入谷歌翻译js插件

最新推荐文章于 2025-10-12 15:31:10 发布

原创最新推荐文章于 2025-10-12 15:31:10 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在网页中嵌入谷歌翻译的JavaScript插件，通过简单步骤实现多语言切换功能，帮助网站内容跨越语言障碍。

复制不带小尾巴点这里

<html>
<body>

这是一个简单的小测试

<!-- 把button放在右下角，这个是可以随意修改的，你可以改成一个链接一个图片之类的 -->
<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>

<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>

<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>