index.html如何调用Google翻译插件？-html教程-PHP中文网

Google 已于2023年12月1日彻底下线google.translate.Element插件，所有调用返回403或报错；替代方案包括启用浏览器原生翻译功能（需正确设置lang属性并移除notranslate meta）或接入LibreTranslate/DeepL等第三方API。

index.html如何调用google翻译插件？

Google 官方已于 2023 年 12 月 1 日彻底关闭了 google.translate.Element 插件（即旧版“翻译此页”浮动栏），所有基于该 API 的调用都会返回 403 Forbidden 或空白/报错。现在直接在 index.html 中插入官方翻译插件代码已无效。

为什么 `google.translate.Element` 不再工作

这是 Google 主动下线的服务，不是配置或网络问题。你看到的常见现象包括：

页面加载后无翻译按钮，控制台报错 Uncaught ReferenceError: google is not defined 或 Failed to load resource: the server responded with a status of 403 ()
即使脚本加载成功，new google.translate.Element(...) 执行时报 TypeError: google.translate.Element is not a constructor
部分 CDN 镜像或缓存版本看似能加载，但实际翻译请求被服务端拒绝

替代方案：使用浏览器原生翻译功能

现代 Chrome、Edge、Firefox（需扩展）都内置页面翻译能力，无需 JS 集成。关键在于不阻止浏览器识别页面语言：

确保 index.html 声明了正确的（目标语言）和真实内容语言一致
避免在中写 —— 这会显式禁用 Google 翻译（即使插件已死，该 meta 仍影响浏览器行为）
不要对整个设置 translate="no"，否则 Edge/Chrome 可能跳过翻译提示
如果页面含多语言混排，可对非目标语段加 translate="no"，例如：APIv2

如需自定义翻译入口，用 DeepL 或 LibreTranslate API（轻量可行）

若必须在页面内提供“一键翻译成英文”按钮，可调用开源或第三方翻译 API。以 LibreTranslate 为例（免费自建或用公共实例）：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

<button onclick="translateToEn()">翻译为英文</button>
<div id="translated-content"></div>

<script>
async function translateToEn() {
  const text = document.body.innerText.slice(0, 5000); // 截断防超长
  try {
    const res = await fetch("https://libretranslate.de/translate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        q: text,
        source: "auto",
        target: "en"
      })
    });
    const data = await res.json();
    document.getElementById("translated-content").innerText = data.translatedText;
  } catch (e) {
    console.error("翻译失败:", e);
  }
}
</script>

注意：libretranslate.de 是公共测试实例，不保证稳定性；生产环境建议自建或换用带配额的商业 API（如 DeepL 的 /v2/translate），且需后端代理绕开 CORS。

真正难的不是加一行 JS，而是接受“没有通用、免费、前端直连的 Google 级翻译嵌入方案”这个事实——所有替代路径都有取舍：浏览器自带最可靠但不可控样式，API 方案要管请求长度、错误重试、语言检测和用户隐私合规。