Disable Auto Translation for Specific Elements

防止自动翻译数学公式、表格、图表等复杂内容

作者
1998x-stack
日安装量
0
总安装量
8
评分
0 0 0
版本
1.0
创建于
2024-09-25
更新于
2024-09-25
大小
1.3 KB
许可证
MIT
适用于
所有网站

以下是关于该代码的详细附加说明及操作说明,帮助更好地理解代码的目的、功能及其应用场景:

功能概述

该代码的主要功能是禁止浏览器自动翻译网页中指定类型的内容,尤其是与数学公式、图表、表格等复杂内容相关的部分。这些内容通常会包含数学符号或专业术语,如果被自动翻译,可能会导致错误或失去原有的含义。为了避免这种情况,代码为相关元素及其子元素添加了translate="no"属性,告诉浏览器不对这些元素进行自动翻译。

代码结构

  1. IIFE (立即调用函数表达式)

    • 代码通过一个自执行的函数包裹,确保执行后不会污染全局作用域。这种方法常用于封装代码逻辑,避免变量冲突。
  2. 严格模式 ('use strict')

    • 启用了JavaScript的严格模式,这可以帮助开发者更早地捕获潜在错误,如未声明的变量等,增加代码的安全性和规范性。
  3. 函数addTranslateNoToElements

    • 该函数的作用是为传入的HTML元素及其所有子元素添加translate="no"属性,确保这些内容不会被自动翻译。
    • 它接受一个NodeList对象(即HTML元素的集合),并遍历这些元素及其子元素,逐一为其添加translate属性。
  4. 获取特定元素

    • 使用document.querySelectorAll获取页面中包含以下class的元素:
      • .ltx_Math, .ltx_equationgroup, .ltx_equation, .ltx_figure, .ltx_table
      • .ltx_caption.ltx_centering
    • 这些class通常用于标识数学公式、方程组、图表、表格及其说明,因此特别需要防止它们被误翻译。
  5. 操作流程

    • 代码首先通过document.querySelectorAll找到指定类型的元素,并通过addTranslateNoToElements函数为每个找到的元素及其子元素设置translate="no"属性。
    • 重复的代码逻辑被提取到一个函数中,提升代码的可维护性和扩展性。

应用场景

该代码适用于以下场景:

  1. 教育类或技术类网站:页面中包含大量数学公式、物理定律、专业图表等,且这些内容不能被自动翻译,以防止丢失专业含义或改变公式结构。
  2. 多语言支持的网站:如国际化网站,其中的内容分为可翻译部分和不可翻译部分。通过设置translate="no"属性,可以精确控制哪些部分的内容不能被翻译。
  3. 科学期刊或学术论文平台:防止论文中的符号、术语、表格等因自动翻译而导致的混淆或错误理解。

操作说明

  1. 在网页中引入该脚本
    • 可以将该代码嵌入网页的<head><body>部分中,确保页面加载时该代码立即执行并对指定的元素生效。
   <script>
       (function() {
           // 脚本内容...
       })();
   </script>
  1. 修改查询的class
    • 如果有额外的内容需要防止翻译,可以在document.querySelectorAll中添加相应的class。例如,如果你还需要阻止code块的翻译,可以将其添加到查询列表中:
   const mathElems = document.querySelectorAll('.ltx_Math, .ltx_equationgroup, .ltx_equation, .ltx_figure, .ltx_table, .code');
  1. 在CMS或博客系统中使用

    • 在内容管理系统(CMS)或博客系统中,如果发布的内容包含复杂的公式或图表,直接将该代码插入页面模板中,可以确保自动化地为这些复杂内容添加translate属性。
  2. 调试与扩展

    • 开发者可以通过浏览器的开发者工具检查是否正确添加了translate="no"属性。右键点击页面的元素,选择“检查”,并查看元素的属性。确认是否已添加此属性。
    • 如果将来有新的内容类型需要添加同样的translate属性,只需在代码中调整querySelectorAll的选择器。

最佳实践

  1. 保持元素选择器简洁

    • 确保选择器足够精准,以避免误操作页面上不相关的内容。例如,如果某些元素包含相同的class但不应受到翻译限制,可能需要进一步精细选择器。
  2. 性能考虑

    • 对于大页面中的大量DOM元素,批量操作可能会影响性能。在这种情况下,应该谨慎选择要操作的元素类型,并尽量减少不必要的DOM操作。

通过这种方式,可以有效避免页面中的关键内容被浏览器错误翻译,同时保持代码简洁、易扩展。