Next.js中处理依赖window load事件初始化的第三方脚本在SPA路由切换后失效的方案咨询

在Next.js这类SPA框架中，依赖window.load事件初始化的第三方脚本确实会遇到路由切换后失效的问题——因为window.load在整个应用会话生命周期中只会触发一次，首次页面加载后再切换路由返回组件时，脚本的初始化逻辑不会再执行。这是非常普遍的场景，下面给你几种可行的解决方案，结合你的示例代码来说明：

方案1：手动调用脚本暴露的初始化函数（优先推荐） #

如果第三方脚本的初始化函数（比如你的示例中的scriptsInitFunction）是挂载在window全局对象上的，那我们可以在组件挂载时手动触发这个函数，跳过window.load的依赖。

修改你的示例组件，结合React的useEffect和Next.js Script的onLoad回调来实现：

'use client';
import Script from 'next/script';
import { useEffect, useState } from 'react';

function ExampleComponent() {
  const [scriptHasLoaded, setScriptHasLoaded] = useState(false);

  useEffect(() => {
    if (scriptHasLoaded) {
      // 检查全局初始化函数是否存在，手动调用
      if (typeof window.scriptsInitFunction === 'function') {
        // 可选：添加标记避免重复执行初始化（如果脚本重复执行会有副作用）
        if (!window._exampleScriptInitialized) {
          window.scriptsInitFunction();
          window._exampleScriptInitialized = true;
        }
        // 如果组件需要多次挂载都重新初始化，就去掉上面的标记判断
      }
    }
  }, [scriptHasLoaded]);

  return (
    <>
      <Script 
        src="example_script.js" 
        onLoad={() => setScriptHasLoaded(true)}
        // 根据脚本优先级选择策略：afterInteractive适合需要DOM交互的关键脚本
        strategy="afterInteractive"
      />
      <div id="exampleContainer"></div>
    </>
  );
}

方案2：拦截脚本的window.addEventListener调用（适合未暴露初始化函数的压缩脚本） #

如果第三方脚本是压缩后的，没有暴露全局初始化函数，我们可以在脚本加载前重写window.addEventListener，捕获它绑定的load事件回调，之后手动调用这个回调。

'use client';
import Script from 'next/script';
import { useEffect, useState } from 'react';

function ExampleComponent() {
  const [initCallback, setInitCallback] = useState(null);
  const [scriptLoaded, setScriptLoaded] = useState(false);

  // 在脚本加载前拦截addEventListener
  useEffect(() => {
    const originalAddEventListener = window.addEventListener;
    
    window.addEventListener = function(type, callback) {
      // 捕获load事件的初始化回调
      if (type === 'load') {
        setInitCallback(callback);
      }
      // 保留原有的事件监听逻辑
      return originalAddEventListener.call(this, type, callback);
    };

    // 组件卸载时恢复原方法
    return () => {
      window.addEventListener = originalAddEventListener;
    };
  }, []);

  // 组件挂载时手动触发初始化
  useEffect(() => {
    if (scriptLoaded && initCallback) {
      initCallback();
    }
  }, [scriptLoaded, initCallback]);

  return (
    <>
      <Script 
        src="example_script.js" 
        onLoad={() => setScriptLoaded(true)}
        strategy="afterInteractive"
      />
      <div id="exampleContainer"></div>
    </>
  );
}

方案3：封装可复用的自定义Hook（适合多个组件使用同个脚本） #

如果你的项目中多个组件都需要用到这个脚本，可以把加载和初始化逻辑封装成自定义Hook，同时加入清理逻辑避免内存泄漏：

'use client';
import { useEffect, useState } from 'react';
import Script from 'next/script';

export function useThirdPartyScript(scriptSrc, containerId) {
  const [scriptReady, setScriptReady] = useState(false);
  const [initFn, setInitFn] = useState(null);

  // 拦截load事件回调
  useEffect(() => {
    const originalAddEventListener = window.addEventListener;
    window.addEventListener = function(type, callback) {
      if (type === 'load') setInitFn(callback);
      return originalAddEventListener.call(this, type, callback);
    };
    return () => window.addEventListener = originalAddEventListener;
  }, []);

  // 处理初始化与清理
  useEffect(() => {
    if (scriptReady && initFn) {
      initFn();
      // 组件卸载时清理脚本生成的DOM内容（按需添加）
      return () => {
        const container = document.getElementById(containerId);
        if (container) container.innerHTML = '';
        // 如果脚本提供了销毁函数，可在此调用：
        // if (window.scriptsDestroyFunction) window.scriptsDestroyFunction();
      };
    }
  }, [scriptReady, initFn, containerId]);

  return {
    scriptElement: (
      <Script 
        src={scriptSrc} 
        onLoad={() => setScriptReady(true)}
        strategy="afterInteractive"
      />
    )
  };
}

// 组件中使用Hook
function ExampleComponent() {
  const { scriptElement } = useThirdPartyScript('example_script.js', 'exampleContainer');
  return (
    <>
      {scriptElement}
      <div id="exampleContainer"></div>
    </>
  );
}

关键注意事项 #

1. Script策略选择：使用strategy="afterInteractive"可以确保脚本在页面可交互后加载，适合需要操作DOM的脚本；如果是非关键脚本，可选择lazyOnload。注意beforeInteractive仅能在App Router的服务器组件（如layout/page）中使用。
2. 重复执行问题：部分脚本的初始化函数重复执行会导致DOM重复创建等问题，可通过在window上添加全局标记（如window._exampleScriptInitialized）来避免。
3. 脚本重复加载：Next.js的Script组件会自动管理脚本的加载状态，不会重复加载同个src的脚本，无需额外处理。

内容来源于stack exchange