Next.js中根据状态加载不同脚本问题求助

核心原因 #

1. 脚本加载后不会自动重新执行，旧的英语脚本实例仍在运行
2. 重复插入脚本标签导致全局配置冲突
3. 不同版本的EqualWeb脚本（4.4.0和4.4.1）可能引发兼容性问题

解决步骤 #

1. 确认Redux语言状态是否正确更新

先在组件中添加日志，验证语言切换时lang值是否正常变化：

const { lang } = useSelector((state) => state.language.language);
console.log('当前语言:', lang); // 切换语言时查看控制台输出

2. 统一脚本加载逻辑，动态更新配置并清理旧实例

替换原有代码为以下实现，通过useEffect监听语言变化，每次切换时清理旧实例并加载新配置：

import { useEffect } from 'react';
import { useSelector } from 'react-redux';

function HeadCustom({ title }) {
  const { lang } = useSelector((state) => state.language.language);

  useEffect(() => {
    // 清理旧的EqualWeb实例和DOM元素
    if (window.interdeal) delete window.interdeal;
    const oldScript = document.querySelector('script[src*="equalweb.com/core/"]');
    if (oldScript) oldScript.remove();
    document.querySelectorAll('[class*="equalweb"]').forEach(el => el.remove());

    // 生成对应语言的配置
    const baseConfig = {
      Position: "Right",
      domains: {
        js: "https://cdn.equalweb.com/",
        acc: "https://access.equalweb.com/"
      },
      btnStyle: {
        vPosition: ["80%", null],
        color: { main: "#5663eb" },
        icon: { type: 11, shape: "semicircle", outline: false }
      }
    };

    const langConfig = lang === "eng" 
      ? {
          sitekey: "216e47f62cb419bc8207601b49e6dbc6",
          Menulang: "EN",
          btnStyle: { ...baseConfig.btnStyle, scale: ["0.6", "0.6"] }
        }
      : {
          sitekey: "b1deb4b25a71a4e1d747032724407d56",
          Menulang: "HEB",
          btnStyle: { ...baseConfig.btnStyle, scale: ["0.8", "0.8"] }
        };

    // 合并配置并挂载到全局
    window.interdeal = { ...baseConfig, ...langConfig };

    // 加载统一版本的核心脚本
    const coreCall = document.createElement('script');
    coreCall.src = 'https://cdn.equalweb.com/core/4.4.1/accessibility.js';
    coreCall.defer = true;
    coreCall.integrity = 'sha512-tq2wb4PBHqpUqBTfTG32Sl7oexERId9xGHX2O3yF91IYLII2OwM1gJVBXGbEPaLmfSQrIE+uAOzNOuEUZHHM+g==';
    coreCall.crossOrigin = 'anonymous';
    coreCall.setAttribute('data-cfasync', true);
    document.body.appendChild(coreCall);

    // 组件卸载时清理资源
    return () => {
      delete window.interdeal;
      const script = document.querySelector('script[src*="equalweb.com/core/4.4.1/"]');
      if (script) script.remove();
      document.querySelectorAll('[class*="equalweb"]').forEach(el => el.remove());
    };
  }, [lang]);

  return null;
}

关键优化点 #

• 统一使用EqualWeb 4.4.1版本脚本，避免版本差异导致的冲突
• 每次语言切换时彻底清理旧的脚本实例和生成的DOM元素
• 提取公共配置，减少代码冗余
• 通过useEffect的依赖数组触发重新执行，确保语言变化时更新脚本

内容的提问来源于stack exchange，提问作者MD. MEHEDI IMAM