CODEWITHSUNDEEP
javascriptjqueryhtml
user8360532
user8360532

Reputation:

Onload need to work only once

Good day everyone i'm having a trouble about working my onload only once . because when i refreshes the page or if i am going to another page it always load. here is my code so far:

JS

<!--Auto load the on overlay function-->
 <script>
    window.onload = function openNav() {
    document.getElementById("myNav").style.width = "100%";
    splashScreen();
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}
</script>

and here's my js functionality for my splashscreen.js

//use onload when in your html the context is not inside
//the <header>
//create a splashScreen function
function splashScreen(){
//get the element on the html side with the id of "skip"
var skipButton = document.getElementById("skip");
//counter for the countdown
var counter = 5;
//create an element <p>
var newElement = document.createElement("p");
newElement.innerHTML = "Skip this 5 seconds";
var id;

skipButton.parentNode.replaceChild(newElement, skipButton);

id = setInterval(function(){
counter--;
    if(counter < 0){
        //replace the newElement on else condition statement
        newElement.parentNode.replaceChild(skipButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can skip this in " + counter.toString() + " seconds.";
    }
}, 1000);
}

and this is how i call it on my html

  <html>
  <body>
<!--SplashScreen JS-->
<script src="<?php echo base_url('assets/public/js/splashscreen.js');?>">
</script>

Upvotes: 1

Views: 12359

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

To be able to know that the splash screen has already been displayed for a given user, you need to store something to that effect that persists between page load events. Since the page will reload when the refresh button is clicked or when coming back to the page after being there earlier, this stored item can't be in the page itself, because it will just get reinitialized every time the page loads.

Cookies (as mentioned in another answer) are an option, but localStorage, I think is much simpler. It works like this:

// Once the window is loaded...
window.addEventListener("load", function(){

   // Check localStorage to see if the splash screen 
   // has NOT already been displayed
   if(!localStorage.getItem("splash")){

     // Splash has not been displayed, so show it:
     splashScreen();

     // Store a value in localStorage to denote that the splash screen
     // has now been displayed
     localStorage.setItem("splash", "true");
   }
});

Upvotes: 1

guest271314
guest271314

Reputation: 1

One approach is to set .name property of window, which remains set after window.

const NAME = "once";

window.onload = function openNav() {
    document.getElementById("myNav").style.width = "100%";
    if (this.name !== NAME) {
      this.name = NAME;
      splashScreen();
    } else {
      // do other stuff
      console.log(this.name)
    }
}

Upvotes: -1

Dr_Derp
Dr_Derp

Reputation: 870

When you refresh the page or go to another page, then back to your original page, the page is reloading, thus the onLoad handler is being called.

If you want certain functionality to only happen once, then one thing you can try is setting a cookie that you can check on page load. If the cookie is set, you know you already loaded it once, and don't run the code again. If not, you run the code, then set the cookie.

Useful link for cookies: https://www.w3schools.com/js/js_cookies.asp

Upvotes: 3

Related Questions