🚀 在网页中嵌入 Google 翻译小部件的实践指南

1. 背景 & 原理

Google 曾提供免费且易用的 “Google Translate Element” 小部件，方便开发者通过简单代码将翻译功能嵌入网页。其核心机制：

• 引入脚本：<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
• 在脚本加载完成后自动调用回调函数 googleTranslateElementInit()，完成小部件初始化流程。该脚本已于 2019 年停止对商业站点推广，但针对政府/非营利机构仍可使用 :contentReference[oaicite:1]{index=1}。

2. 基本使用方法

基本的 HTML + JS 集成方式如下：

<div id="google_translate_element"></div>

<script>
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      includedLanguages: 'en,es,fr,zh-CN'
    }, 'google_translate_element');
  }
</script>

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

• pageLanguage：原始语言；
• layout：显示样式，如 INLINE, HORIZONTAL ；
• includedLanguages：用于限制可翻译语种。

W3Schools 给出了这一实现范例 。

3. 实际注意事项

• 图片加载问题：在本地开发环境可能不显示 select 选项，因为脚本内嵌入了 <iframe>，需要放到线上环境才有效 。

• 样式定制：可用 CSS 隐藏“Powered by Google Translate”等水印内容，例如：

  .goog-logo-link { display:none !important; }
  .goog-te-gadget { font-size:0px !important; }
  

  或用 JS 删除 DOM 节点 。

• 页面跳转失效：在一些 CMS（如 Squarespace）中，navbar 跳转后小部件消失，解决方法是将脚本放置在 header/footer injection 区域，并搭配 jQuery 延迟加载 。

4. 脚本已停用？是否还能用？

尽管 Google 在 2019 年停止对该 Translate Element 进行推广，但 script 仍然在运行，社区反馈依然可用 ([support.google.com][1])。但官方不再支持商业用途，仅适用于公共或非营利使用 。

5. 替代方案推荐

6. 总结建议

• ✅ 若你是非商业机构，可继续使用旧版小部件，简单快捷；
• ⚠️ 若你是商业站点，建议使用付费 API 或第三方插件；
• 🔧 技术实施上注意：脚本放于 header/footer 区、容器 DIV 放顶端、提供 fallback；样式可定制；生产环境测试。