如何在<script>脚本执行前将其从页面中移除？

我有一个部署在服务器上的页面，服务器会向index.html注入一段<script>脚本，希望在该脚本执行前将其移除。简化示例如下：

<!doctype html>
<html lang="en">
<body> 
<script id="removeme">
    console.log("go");
</script>
</body>
</html>

我尝试添加一段脚本移除id为removeme的脚本：

<!doctype html>
<html lang="en">
<body>
nothing to show
<script id="script_which_removes_the_other_script">
    // First attempt
    console.log("1 trying to remove " );
    const unwantedScript = document.getElementById('removeme');
    console.log("1 the script tag to remove: " + unwantedScript );
    if (unwantedScript) {
        unwantedScript.remove();
        console.log('1 Unwanted script removed.');
    }
    else{
     console.log('1 Did not found the script to remove.');
    }

    // Second attempt
    document.addEventListener('DOMContentLoaded', () => {
        console.log("2 trying to remove " );
        const unwantedScript = document.getElementById('removeme');
        console.log("2 the script tag to remove: " + unwantedScript );
        if (unwantedScript) {
            unwantedScript.remove();
            console.log('2 Unwanted script removed.');
        }
     });
</script>
<script id="removeme">
    console.log("go");
</script>
</body>
</html>

但两种方法都无法阻止脚本执行，控制台输出如下：

1 trying to remove 
1 the script tag to remove: null
1 Did not found the script to remove.
go
2 trying to remove 
2 the script tag to remove: [object HTMLScriptElement]
2 Unwanted script removed.

问题原因 #

浏览器解析HTML是从上到下同步执行的：

• 第一段脚本执行时，removeme脚本还没被解析到DOM中，所以找不到目标元素
• DOMContentLoaded触发时，removeme的代码已经执行完毕，此时移除标签毫无意义

可行解决方案 #

方法1：用document.write重写页面（适用于脚本在body内的场景）

在body开头插入脚本，用document.write覆盖后续内容，直接跳过removeme脚本：

<!doctype html>
<html lang="en">
<body>
<script>
// 重写body内容，忽略后续的removeme脚本
document.write(`nothing to show`);
// 若有其他需要保留的内容，可在此手动添加
</script>
<script id="removeme">
    console.log("go");
</script>
</body>
</html>

原理：document.write会中断当前HTML解析流程，直接写入新内容，后续未解析的代码会被丢弃。

方法2：用MutationObserver监听DOM变化（通用方案）

在页面最早期位置（比如head内）插入监听脚本，当removeme标签被插入DOM但还未执行时，立刻移除它：

<!doctype html>
<html lang="en">
<head>
<script>
// 创建观察者，监听body的子节点添加事件
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.id === 'removeme') {
        node.remove();
        observer.disconnect(); // 找到目标后断开监听，节省性能
      }
    });
  });
});
// 开始监听body的子节点变化
observer.observe(document.body, { childList: true });
</script>
</head>
<body>
nothing to show
<script id="removeme">
    console.log("go");
</script>
</body>
</html>

原理：脚本标签的执行时机是被插入DOM后立刻执行，而MutationObserver的回调会在这个执行动作之前触发，因此能及时拦截。

注意事项 #

• 若无法修改head，把监听脚本放在body最开头位置也能生效
• 绝对不要用DOMContentLoaded或window.onload，这两个事件触发时目标脚本已经执行完了

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