Need Help With SPA routing

xasharma

I want to load ads on a Flarum that is a single page application on every page

Please help in Implementing a JavaScript code when the refresh ads without refreshing the page and create the code by any common id so that one code can load all the ads

I tried many times and tried different with different routing pushState and replaceState but nothing happened

All codes are below -

<script type="text/javascript" src="//prebid.revbid.net/985/revbid.js" async></script>

<div data-placement-id="revbid-square" id='revbid-square-759' style='min-width: 300px; min-height: 250px;text-align:center'></div>

<div data-placement-id="revbid-square" id='revbid-square-765' style='min-width: 300px; min-height: 250px;text-align:center'></div>

<div data-placement-id="revbid-square" id='revbid-square-767' style='min-width: 300px; min-height: 250px;text-align:center'></div>

<div data-placement-id="revbid-square" id='revbid-square-768' style='min-width: 300px; min-height: 250px;text-align:center'></div>

clarkwinkelmann

xasharma have you tried https://discuss.flarum.org/d/27494-flarum-ads-for-10 ?

xasharma

Anyone please update and help about ad refreshing

xasharma

clarkwinkelmann Yes but these extension load ads only for once and after that ads just disappear.

xasharma

Can some update a little and guide me about the code

and please tell about the flarum listeners.

xasharma

After so many days, Me and my friend made a code but it refreshes the ad on every scroll. Please help with this.

(function() {
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;
    function onUrlChange() {
        console.log('URL changed to:', window.location.href);
        reloadPrebidScript();
    }
    history.pushState = function(...args) {
        originalPushState.apply(this, args);
        onUrlChange();
    };
    history.replaceState = function(...args) {
        originalReplaceState.apply(this, args);
        onUrlChange();
    };
    window.addEventListener('popstate', onUrlChange);
    function reloadPrebidScript() {
        console.log('Reloading Prebid script...');
        
        // Remove existing script if present
        const existingScript = document.querySelector('script[src^="https://prebid.revbid.net/"]');
        if (existingScript) {
            existingScript.parentNode.removeChild(existingScript);
        }

        // Create a new script element
        const script = document.createElement('script');
        script.src = '//prebid.revbid.net/985/revbid.js'; 
        script.async = true;
        script.onload = () => {
            console.log('Prebid script loaded.');
        };
        document.head.appendChild(script);
    }
    onUrlChange();
})();

hf06

xasharma

(function() {
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;

    function onUrlChange() {
        const currentUrl = window.location.href;
        console.log('URL changed to:', currentUrl);

        // Regex to exclude /d/ or /d/*/?
        const excludedUrlPattern = /\/d\/(\d+\/?)?$/;

        if (!excludedUrlPattern.test(currentUrl)) {
            reloadPrebidScript();
        } else {
            console.log('URL change excluded from reloading Prebid script.');
        }
    }

    history.pushState = function(...args) {
        originalPushState.apply(this, args);
        onUrlChange();
    };

    history.replaceState = function(...args) {
        originalReplaceState.apply(this, args);
        onUrlChange();
    };

    window.addEventListener('popstate', onUrlChange);

    function reloadPrebidScript() {
        console.log('Reloading Prebid script...');
        
        // Remove existing script if present
        const existingScript = document.querySelector('script[src^="https://prebid.revbid.net/"]');
        if (existingScript) {
            existingScript.parentNode.removeChild(existingScript);
        }

        // Create a new script element
        const script = document.createElement('script');
        script.src = '//prebid.revbid.net/985/revbid.js'; 
        script.async = true;
        script.onload = () => {
            console.log('Prebid script loaded.');
        };
        document.head.appendChild(script);
    }

    onUrlChange();
})();

I tried excluding discussion pages using a regex because, in discussions, the comment ID gets added to the URL while scrolling. I haven't tested it; I just wanted to propose an idea.

xasharma

hf06 Thank you for the help. I tried it but still loads the ads with every scroll.

hf06

xasharma I may not have done the regex part correctly, I did it quickly to give you an idea