跳转到主内容
极星编程网：以代码为星，赴技术山海！
📁 网站地图

translate属性有什么用？HTML阻止自动翻译功能解析

苏承栈
苏承栈
• 👁 0人浏览过
Chrome仅识别字面值translate="no"，它是HTML5枚举属性（合法值仅"yes"/"no"），作用是阻止翻译器提取该元素及子节点文本，不改变DOM或JS执行；需在初始HTML的标签声明，动态插入内容须手动添加，且需配合精确lang值（如lang="zh-CN"）才能可靠生效。 translate="no" 是唯一被 Chrome 真正识别的禁译开关 Chrome 只认字面值
translate="no"
，写成
translate="false"
、
translate=""
或
translate="off"
都无效。它不是布尔属性，而是 HTML5 枚举属性，合法值仅有
"yes"
和
"no"
两个字符串。 这个属性的作用很直接：告诉 Chrome 的内置翻译引擎“跳过这个元素及其所有子节点的内容”。它不改变 DOM 结构，不触发重排，也不影响 JS 执行——只影响翻译器对文本的提取逻辑。
覆盖整页，但要求必须写在初始 HTML 的
标签上；JS 后续修改
document.documentElement.translate
不生效 局部禁译时，
API_KEY
比套个
更可靠——后者只是约定俗成的 class，浏览器根本不看 若父级已设
translate="no"
，子级即使显式写
translate="yes"
也可能被忽略（Chrome 继承策略较保守） 为什么加了 translate="no" 还被翻译？检查这三处硬伤 常见失效不是属性没写，而是被更高优先级信号覆盖或漏掉关键依赖。 父容器没同步设
translate="no"
：比如
下的
有效，但若
没设，而
单独设了，Chrome 仍可能因上下文语言混杂而降级处理 动态插入内容没补属性：用
innerHTML
或
appendChild()
加的节点，必须手动加
translate="no"
，不能指望继承——DOM 插入后不自动继承父级 translate 状态
lang
值矛盾或缺失：Chrome 先看
lang
再看
translate
。若页面是中文却写
lang="en"
，或只写
lang="zh"
（不带区域码），它可能判定“语言不可信”，转而忽略
translate="no"
meta name="google" content="notranslate" 只管 Google 生态 这个
标签对 Chrome 浏览器内置翻译功能完全无效，它只影响：
Google 搜索结果页里的“网页翻译”按钮
、
Google 翻译插件
、以及部分第三方基于 Google API 的工具。 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 它必须放在
最前面，且不能写错 name：
name="google"
是唯一合法值，写成
name="robots"
或
name="viewport"
就彻底失效。 和
translate="no"
同时存在时，Chrome 以
translate
属性为准，但 Google 插件可能只认
不要把它当主力方案——现代项目里，
+ 显式
lang="zh-CN"
已足够覆盖 95% 场景 服务端渲染时注意：如果
lang
是 JS 动态注入的（比如 i18n 库改
document.documentElement.lang
），Chrome 读不到，等于白设 class="notranslate" 是兼容性兜底，不是首选方案 这个 class 名是历史遗留产物，源于早期 Google 工具栏时代，Chrome 内置翻译至今仍支持它，但属于“尽力而为”级别：它只阻止文本内容被翻译， 对 class、id、data-* 等属性值完全无效 。 比如
Submit
能保 class 不变；而仅靠
class="notranslate"
，Chrome 仍可能把
c-button--primary
当作英文单词尝试翻译成 “提交按钮--主要”。 适合快速修复老项目，或作为
translate="no"
的辅助标记（便于 CSS 定义样式） 别在关键命名（如 BEM、CSS-in-JS 生成类名）上只依赖它——属性值污染风险真实存在 Safari 对
class="notranslate"
支持不稳定，iOS 上尤其容易失效，必须搭配
translate="no"
使用 真正要稳，就两件事：初始 HTML 的
标签上同时写死
translate="no"
和精确
lang
值；所有动态插入的敏感文本节点，手动补
translate="no"
。别省那几行 JS，浏览器不替你记这个事。

相关文章