React页面导航返回后脚本加载的广告无法显示，如何解决？

你的问题出在组件卸载时移除了广告脚本，且重新挂载时虽然再次添加脚本，但浏览器会缓存脚本不会重新执行，同时广告库没有重新扫描DOM中的广告占位符。以下是几个可行的解决方案：

方案1：复用已加载的广告库，主动触发渲染 #

大多数广告SDK在加载后会暴露全局方法用于重新渲染广告，针对你的aso-zone广告，可以尝试调用SDK的全局渲染方法：

import { useEffect } from 'react';

function AdsComponent() {
    useEffect(() => {
        // 检查广告SDK是否已加载
        if (window.aso) {
            // 直接调用渲染方法，扫描DOM中的广告占位符
            window.aso.render();
            return;
        }

        // 未加载则初始化脚本
        const script = document.createElement('script');
        script.src = 'https://example.example.net/js/code.min.js';
        script.async = true;
        script.setAttribute('data-cfasync', 'false');
        
        // 脚本加载完成后触发广告渲染
        script.onload = () => {
            window.aso?.render();
        };

        document.body.appendChild(script);

        return () => {
            // 不要移除脚本，避免重复加载引发冲突
            // 仅在脚本未完成加载时清理
            if (!script.isLoaded && script.parentNode) {
                script.parentNode.removeChild(script);
            }
        };
    }, []);

    return (
        <div className='mt-[2rem] mr-[2rem]'>
            <ins className='aso-zone' data-zone='96230'></ins>
            <ins className='aso-zone' data-zone='96231'></ins>
        </div>
    );
}

export default AdsComponent;

方案2：手动触发广告占位符的重新识别 #

如果广告SDK没有暴露渲染方法，可以通过修改DOM属性触发SDK的自动扫描逻辑：

import { useEffect } from 'react';

function AdsComponent() {
    useEffect(() => {
        let scriptLoaded = false;

        if (window.aso) {
            triggerAdRender();
            return;
        }

        const script = document.createElement('script');
        script.src = 'https://example.example.net/js/code.min.js';
        script.async = true;
        script.setAttribute('data-cfasync', 'false');
        
        script.onload = () => {
            scriptLoaded = true;
            triggerAdRender();
        };

        document.body.appendChild(script);

        return () => {
            if (!scriptLoaded && script.parentNode) {
                script.parentNode.removeChild(script);
            }
        };

        // 手动触发广告识别
        function triggerAdRender() {
            document.querySelectorAll('.aso-zone').forEach(zone => {
                // 重置data-zone属性，触发SDK重新扫描
                const zoneId = zone.getAttribute('data-zone');
                zone.setAttribute('data-zone', zoneId);
            });
        }
    }, []);

    return (
        <div className='mt-[2rem] mr-[2rem]'>
            <ins className='aso-zone' data-zone='96230'></ins>
            <ins className='aso-zone' data-zone='96231'></ins>
        </div>
    );
}

export default AdsComponent;

关键注意点 #

• 不要在组件卸载时移除脚本标签：脚本加载后，SDK的逻辑已存在于浏览器内存中，移除标签不会清理这些代码，反而会导致重复加载引发冲突。
• 优先复用已加载的SDK：避免重复请求脚本，提升性能同时避免潜在问题。
• 确保脚本加载完成后再触发渲染：通过onload事件保证SDK初始化完成后再执行渲染逻辑。

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