Disable Auto Translation for Specific Elements

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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

作者
1998x-stack
今日安裝
0
安裝總數
12
評價
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操作。

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