为何全局onload函数不触发页面加载？如何检测有效window.onload？

浏览器对window.onload的处理存在特殊逻辑：

• 直接声明全局函数function onload() {}时，该函数会挂载到window对象上，但不会被浏览器注册为页面加载回调，因此不会在页面加载完成时触发。
• 通过window.onload = 函数显式赋值时，会触发浏览器为window.onload实现的专用setter，该setter会将函数注册为load事件的回调，因此会正常触发。

要区分这两种情况，可以通过以下两种方法实现稳健检测：

方法一：检查属性描述符类型 #

浏览器原生的window.onload是一个访问器属性（包含get和set方法），而全局函数声明会覆盖它为数据属性（包含value字段）。我们可以通过属性描述符的类型判断：

function isOnloadTriggerable() {
  const desc = Object.getOwnPropertyDescriptor(window, 'onload');
  // 检查是否是浏览器原生的访问器属性
  const isNativeAccessor = desc.get && desc.set 
    && typeof desc.get === 'function' 
    && desc.get.toString().includes('[native code]');
  
  // 如果是原生访问器，且window.onload是函数，说明是会触发的赋值
  return isNativeAccessor && typeof window.onload === 'function';
}

方法二：通过赋值测试验证 #

利用浏览器原生setter的特性，临时替换window.onload并检查是否生效：

function checkOnloadTriggerable() {
  const originalOnload = window.onload;
  let triggerable = false;

  // 定义临时测试函数
  function testOnload() {}
  // 尝试赋值
  window.onload = testOnload;

  // 如果赋值后window.onload指向测试函数，说明使用了原生setter（会触发）
  if (window.onload === testOnload) {
    triggerable = typeof originalOnload === 'function';
  }

  // 恢复原onload函数，避免影响页面逻辑
  window.onload = originalOnload;
  return triggerable;
}

测试结果说明 #

• 当页面仅用function onload() {}声明时，两个方法都会返回false，表示该函数不会触发。
• 当页面通过window.onload = fn赋值时，两个方法会返回true（如果fn是函数类型），表示该函数会在页面加载时触发。

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