求助：Next.js中无法为window对象绑定load事件监听器的问题

这个问题我之前踩过坑，核心原因其实是Next.js组件挂载的时机可能晚于window.load事件的触发时机。

问题根源 #

浏览器的load事件会在所有页面资源（图片、样式表、脚本、字体等）完全加载完成后才触发。而你的组件是通过React的useEffect绑定事件监听的——useEffect会在组件挂载到DOM之后才执行。如果此时页面资源已经加载完毕，load事件早就触发过了，你的监听器自然就捕获不到这个事件。

另外你的代码还有个小隐患：useEffect没有设置依赖数组，这会导致组件每次重渲染时都重复绑定监听器，容易造成内存泄漏。

修正后的代码 #

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    function handleLoad(e) {
      console.log("页面加载完成", e);
    }

    // 先判断页面是否已经加载完成
    if (document.readyState === "complete") {
      handleLoad(null); // 已加载完成直接执行回调
    } else {
      window.addEventListener("load", handleLoad);
    }

    // 清理函数：移除监听器防止内存泄漏
    return () => {
      window.removeEventListener("load", handleLoad);
    };
  }, []); // 空依赖数组确保只执行一次

  return <div>Hello world</div>;
}

关键说明 #

• 通过document.readyState判断页面状态：如果状态是complete，说明load事件已经触发过，直接执行你的回调逻辑即可。
• 增加空依赖数组[]：确保useEffect只在组件挂载时执行一次，避免重复绑定监听器。
• 必须添加清理函数：组件卸载时移除事件监听器，防止内存泄漏。

如果你的需求只是等待DOM结构加载完成（不需要等图片、字体等资源），可以改用DOMContentLoaded事件，它的触发时机更早，更不容易错过。

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