如何在<head>阶段拦截DOM解析时移除<body>属性定义的onload事件

问题核心原因 #

<body> 标签的 onload 属性本质绑定的是 window 的全局 load 事件，而非 body 元素自身的事件。浏览器解析到 <body onload="xxx"> 标签时，会直接将回调函数注册到全局事件队列中，这个注册动作和 body 元素是否被插入到 DOM 树、是否被后续修改完全无关。你替换原有 <html> 元素的操作只会修改内存中的 DOM 树结构，不会清理已经进入浏览器事件队列的 load 回调，这就是之前的方案无效的根本原因。

可行解决方案 #

方案1：使用 document.write 直接中断解析流

这是最彻底的中断方式，直接放在 <head> 内的首个脚本最开头执行即可：

document.write('');
document.close();

调用后浏览器会直接终止当前的 HTML 解析流程，后续所有标签（包括带 onload 的 body 标签）都不会被解析，自然也不会触发对应事件注册。

方案2：全局拦截 load 事件注册

如果需要保留部分解析逻辑，可以在执行 DOM 修改前先劫持事件注册逻辑：

// 优先执行这段拦截逻辑
const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener, options) {
  // 过滤所有 window 上的 load 事件注册
  if (this === window && type === 'load') return;
  return originalAddEventListener.call(this, type, listener, options);
};
// 拦截 window.onload 赋值
Object.defineProperty(window, 'onload', {
  set: () => {},
  get: () => null,
  configurable: false
});

// 再执行你原来的替换逻辑
document.replaceChild(document.createElement('html'), document.children[0]);

方案3：调用原生 window.stop() 终止加载

直接调用浏览器原生的停止加载接口，效果和用户点击浏览器地址栏的停止按钮完全一致，会终止所有解析、资源加载、事件注册动作，比手动修改 DOM 效率更高：

window.stop();

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