页面切换时如何清理DOM？NextJS广告脚本遗留问题求助

方案1：用MutationObserver追踪并清理动态添加的元素 #

第三方广告脚本生成的元素虽然属性动态，但通常带有固定特征（比如脚本src包含供应商域名、元素类名/id有特定前缀）。可以通过MutationObserver监控head和body的节点变化，记录所有广告相关元素，在组件卸载时批量移除。

import { useEffect, useRef } from 'react';

export default function AdPage() {
  const addedNodesRef = useRef(new Set());
  const observerRef = useRef(null);

  useEffect(() => {
    // 自定义判断广告元素的逻辑，根据实际情况调整
    const isAdRelatedNode = (node) => {
      // 示例：匹配脚本域名、广告容器类名
      if (node.tagName === 'SCRIPT' && node.src.includes('your-ad-vendor-domain.com')) {
        return true;
      }
      if (node.classList?.contains('ad-vendor-')) {
        return true;
      }
      return false;
    };

    // 初始化观察者，监控节点添加
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        Array.from(mutation.addedNodes).forEach((node) => {
          if (isAdRelatedNode(node)) {
            addedNodesRef.current.add(node);
          }
        });
      });
    });

    // 监听head和body的子节点变化，开启子树监控覆盖嵌套元素
    observer.observe(document.head, { childList: true, subtree: true });
    observer.observe(document.body, { childList: true, subtree: true });
    observerRef.current = observer;

    // 组件卸载时清理所有记录的广告元素
    return () => {
      observerRef.current.disconnect();
      addedNodesRef.current.forEach((node) => {
        node.parentNode?.removeChild(node);
      });
      addedNodesRef.current.clear();
    };
  }, []);

  // 加载广告脚本
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-ad-vendor-domain.com/ad-script.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      script.parentNode?.removeChild(script);
    };
  }, []);

  return (
    <div>
      <div id="ad-container"></div>
    </div>
  );
}

方案2：用动态组件隔离广告逻辑 #

把广告相关代码封装成独立组件，通过next/dynamic动态导入并禁用SSR，确保广告脚本仅在客户端加载，组件卸载时自动触发清理逻辑。

// components/AdUnit.js
import { useEffect, useRef } from 'react';

export default function AdUnit() {
  const addedNodesRef = useRef(new Set());
  const observerRef = useRef(null);

  useEffect(() => {
    const isAdRelatedNode = (node) => {
      return node.tagName === 'SCRIPT' && node.src.includes('your-ad-vendor-domain.com') 
        || node.id?.startsWith('ad-');
    };

    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        Array.from(mutation.addedNodes).forEach(node => {
          if (isAdRelatedNode(node)) addedNodesRef.current.add(node);
        });
      });
    });

    observer.observe(document.head, { childList: true, subtree: true });
    observer.observe(document.body, { childList: true, subtree: true });
    observerRef.current = observer;

    // 加载广告脚本
    const script = document.createElement('script');
    script.src = 'https://your-ad-vendor-domain.com/ad-script.js';
    script.async = true;
    document.body.appendChild(script);
    addedNodesRef.current.add(script);

    return () => {
      observerRef.current.disconnect();
      addedNodesRef.current.forEach(node => node.parentNode?.removeChild(node));
      addedNodesRef.current.clear();
    };
  }, []);

  return <div id="ad-container"></div>;
}

在页面中动态导入组件：

// pages/ad-page.js
import dynamic from 'next/dynamic';

const AdUnit = dynamic(() => import('../components/AdUnit'), {
  ssr: false,
  loading: () => <div>加载广告中...</div>
});

export default function AdPage() {
  return (
    <div>
      <h1>广告页面</h1>
      <AdUnit />
    </div>
  );
}

方案3：备选：强制页面刷新（体验略差） #

如果以上方案无效，可在离开广告页面时用window.location.href替代NextJS客户端导航，强制刷新页面彻底清除所有DOM元素。

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function AdPage() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      if (url !== router.asPath) {
        window.location.href = url;
      }
    };

    router.events.on('routeChangeStart', handleRouteChange);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router]);

  // 加载广告脚本
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-ad-vendor-domain.com/ad-script.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      script.parentNode?.removeChild(script);
    };
  }, []);

  return <div id="ad-container"></div>;
}

注意事项 #

• 务必根据广告供应商实际生成的元素特征，调整isAdRelatedNode的判断逻辑，比如补充元素的样式特征、父容器标识等。
• 若广告脚本嵌套生成元素，需开启subtree: true确保能监控到所有层级的节点变化。

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