Load javascript only once, even after reloading page

Question

I have a wordpress page and I need to edit my JS function to load only one, even if I click to reload page or go to another post. Is it possible to avoid rerun of function with page reloading?

function showAd(){
        var adShownTel = false;
        jQuery(window).scroll(function() {
            var currentScroll = jQuery(window).scrollTop();
            if (currentScroll > 1600 && !adShownTel) {    
                var screenWidth = jQuery( document ).width();
                    adShownTel = true;
                    var $bannTel = jQuery("<div>", {id: "sticky_banner_tel_UTM", "class":"sticky_banner_tel_UTM"});
                    if(sssp.displaySeznamAds()) {
                        if(screenWidth < 737){
                        $bannTel.append('<div style="display:inline-block;"><div id="ssp-zone-97408"></div><script>sssp.getAds([{"zoneId": 97408, "id": "ssp-zone-97408","width": 320,"height": 100}]);</script></div>');
                    }
                    var $bannElClose = jQuery("<div>", {id: "sticky_banner_close", "class": "sticky_banner_close"});
                    $bannElClose.append('<span>Zavřít reklamu</span>');
                    $bannElClose.click(function(){
                        if(screenWidth < 737){
                            $bannTel.slideToggle("slow");
                        }
                    });
                        if(screenWidth < 737){
                            $bannTel.append($bannElClose);
                            jQuery('body').append($bannTel);
                        }
                }
            }
        });
    }
    jQuery(document).ready(function(){  
        showAd();
    });

You'll need to use some sort of browser storage to track if the JS has been run/advert viewed. Most commonly that would be a cookie.. See here: https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie — Synthetx, Jul 31 '19 at 23:04
Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — , Jul 31 '19 at 23:24

score 1 · Answer 1 · answered Jul 31 '19 at 23:05

This may be a job for a cookie :} This obligatory tutorialpoint link may be able to help you out try something like:

function showAd(){
    **if(!document.cookie){**
        var adShownTel = false;
        **document.cookie = "visited";**
        jQuery(window).scroll(function() {
            var currentScroll = jQuery(window).scrollTop();
            if (currentScroll > 1600 && !adShownTel) {    
                var screenWidth = jQuery( document ).width();
                    adShownTel = true;
                    var $bannTel = jQuery("<div>", {id: "sticky_banner_tel_UTM", "class":"sticky_banner_tel_UTM"});
                    if(sssp.displaySeznamAds()) {
                        if(screenWidth < 737){
                        $bannTel.append('<div style="display:inline-block;"><div id="ssp-zone-97408"></div><script>sssp.getAds([{"zoneId": 97408, "id": "ssp-zone-97408","width": 320,"height": 100}]);</script></div>');
                    }
                    var $bannElClose = jQuery("<div>", {id: "sticky_banner_close", "class": "sticky_banner_close"});
                    $bannElClose.append('<span>Zavřít reklamu</span>');
                    $bannElClose.click(function(){
                        if(screenWidth < 737){
                            $bannTel.slideToggle("slow");
                        }
                    });
                        if(screenWidth < 737){
                            $bannTel.append($bannElClose);
                            jQuery('body').append($bannTel);
                        }
                }
            }
        });
    }
    }
    jQuery(document).ready(function(){  
        showAd();
    });

Hope this helps :)

score 0 · Answer 2 · answered Jul 31 '19 at 23:05

0

You could use a cookie or local storage. Something like this:

function showAd(){
        ...
        adShownTel = true;
        window.localStorage.setItem('adShownTel', true)
        ...
}

jQuery(document).ready(function(){  
        if (Boolean(window.localStorage.getItem('adShownTel'))) {
                showAd();
        }
});

But if you're not comfortable with these things then maybe it would be better to try to find a library rather than implementing this functionality yourself.

Good luck!

answered Jul 31 '19 at 23:05

Mohrn

816
4
15

`Boolean` won't work as expected here as `Boolean("false");` will return `true`, not `false` – Nick Parsons Jul 31 '19 at 23:41
@NickParsons In this example `window.localStorage.getItem('adShownTel')` will never be `false`. It will be `null` though and `Boolean(null) === false` – Mohrn Aug 01 '19 at 13:09

Load javascript only once, even after reloading page

2 Answers2