可行,需遍历所有带src的script标签,用new URL(el.src, location.href).origin !== location.origin精准判断跨源,再安全移除;避免误删同源脚本。

如何用 JavaScript 批量删除所有 <script src></script> 外链
直接删掉所有带 src 属性且非内联的 <script></script> 标签,是可行的,但必须排除 src 为空、为相对路径(如 "./main.js")或协议相对 URL(如 "//cdn.jsdelivr.net/...")的误判情况。关键是靠属性存在性 + URL 结构判断,而不是简单看有没有 src。
常见错误是:document.querySelectorAll('script[src]') 会把本地脚本也干掉;或者用 .includes('http') 漏掉 HTTPS 或匹配到注释里的字符串。
- 优先用
script[src]:not([src^="/"]):not([src^="./"]):not([src^="../"]):not([src^="data:"])这类属性选择器筛出明显外域链接 - 更稳妥的做法是:遍历所有
script[src],再对el.src做 URL 解析,检查new URL(el.src, location.href).origin !== location.origin - 注意:动态插入的脚本(如通过
document.createElement('script')加载的)也会被选中,只要它已挂载到 DOM 中 - 执行
.remove()前最好加个判断:if (el.parentNode) el.remove(),避免已移除节点重复操作报错
为什么不能只用 querySelectorAll('script[src]') 一删了事
因为这个选择器会命中所有带 src 的 <script></script>,包括你项目自己的模块脚本(比如 <script src="app.js"></script>),删完页面 JS 功能就崩了。这不是“批量删除外部链接”,这是“批量删除所有脚本”。
真正要识别“外部”,得看资源是否跨源(origin)。浏览器对 el.src 返回的是解析后的绝对 URL,所以可以用 URL 构造函数比对:
立即学习“前端免费学习笔记(深入)”;
const externalScripts = Array.from(document.querySelectorAll('script[src]'))
.filter(el => {
try {
const url = new URL(el.src, location.href);
return url.origin !== location.origin;
} catch {
return false; // 非法 URL(如空值、#hash)跳过
}
});
这样能准确区分 https://unpkg.com/react@18/umd/react.development.js 和 http://localhost:3000/static/js/bundle.js,哪怕后者用了 HTTP 协议。
remove() 之后脚本真的停运了吗
是的,但有延迟窗口:如果某个外链脚本正在执行中(比如卡在长循环或 fetch 等待响应),.remove() 不会中断它;它只是从 DOM 移除标签,不终止已运行的 JS 上下文。已加载并执行过的代码(如全局变量、绑定的事件)依然存在。
也就是说:.remove() 阻止的是后续加载,不是回滚已执行逻辑。
- 已发起但未完成的网络请求(如脚本里写的
fetch)不受影响,会继续走完 - 定时器(
setTimeout、setInterval)也不会被清除,除非脚本自己做了清理 - 想彻底“卸载”一个脚本的效果,仅靠删 DOM 节点做不到;需要设计可卸载的模块系统(如 UMD 导出 cleanup 函数)
容易被忽略的边界情况
实际页面中常有几种“伪装成外链”的脚本,删之前务必确认:
-
<script src="//cdn.example.com/lib.js"></script>—— 协议相对 URL,el.src在 HTTPS 页面里会变成https://...,能被URL构造函数正确识别 -
<script src="https://example.com/script.js?ver=1.2.3"></script>—— 查询参数不影响 origin 判断,安全 -
<script src="data:text/javascript,console.log(1)"></script>——data:URL 属于同源,不应删除,上面的URL构造函数会抛错,catch后自动过滤 - 构建工具注入的 runtime 脚本(如 Webpack 的
runtime.js)可能带 hash,但仍是同源,别误杀
最保险的做法:先用 console.table(externalScripts.map(s => s.src)) 打印出来人工核对一遍,再执行 .remove()。



















