如何在UI5中移除DOM内的script元素并实现动态加载与卸载？

问题原因分析 #

移除script标签后功能仍生效的原因 #

• 浏览器中<script>标签一旦加载并执行完成，内部的代码逻辑（包括全局变量定义、事件监听注册、原型方法挂载、第三方库初始化等）都会永久驻留内存，仅删除DOM树上的script标签，不会撤销已经执行的代码产生的副作用，这是浏览器的固有运行机制。

appendChild时报错的原因 #

有两个常见诱因：

• 逻辑分支漏洞：你的else分支覆盖了「lang为英文且已存在对应script元素」、「lang为非英文且不存在对应script元素」两种场景，第二种场景下something值为null，直接append null必然报错。
• 移除元素后无法从DOM查询：script元素被remove()移出DOM树后，document.getElementById()无法再查询到该元素，再次需要append时something为null，也会触发报错。

修复方案 #

第一步：补充脚本清理逻辑 #

如果需要在非英文场景下完全停用该script的功能，你需要针对脚本的实际功能编写对应清理逻辑，常见清理操作包括：

• 把脚本挂载的全局变量赋值为null
• 移除脚本注册的所有全局事件监听
• 销毁脚本初始化的实例对象
  注意：仅删除DOM标签无法实现停用脚本功能的效果，必须主动清理副作用。

第二步：调整DOM操作逻辑 #

不要每次都从DOM查询script元素，而是将创建的script元素引用存储在全局/闭包变量中，避免移除后无法获取。调整后的代码参考：

// 将script引用存在外部作用域，不要每次都查DOM
let customScript = document.getElementById("id");

function switchLang(lang) {
    const isEn = lang.toLowerCase().startsWith("en");
    if (isEn) {
        if (!customScript) {
            // 首次创建
            customScript = document.createElement("script");
            customScript.id = "id";
            customScript.setAttribute("...", "...");
            // 其他属性设置
            document.body.appendChild(customScript);
        } else if (!document.body.contains(customScript)) {
            // 之前被移除了，重新加回DOM
            document.body.appendChild(customScript);
            // 注意：如果是已经执行过的script，重新append不会再次执行，需要重新执行的话要创建新的script标签
        }
    } else {
        if (customScript && document.body.contains(customScript)) {
            // 从DOM移除
            customScript.remove();
            // 此处补充你自己的脚本副作用清理逻辑
        }
    }
}

额外注意点 #

如果你的script是外部脚本，或者需要重新加回DOM时重新执行代码，那么不能复用之前的script元素，每次重新添加时都要创建全新的script标签，旧的script引用直接置空即可，因为已经执行过的script标签即使重新插入DOM也不会二次执行。

内容的提问来源于stack exchange，提问作者user5206515