3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu January 19, 2024 . #HowTo . #Javascript
❌

Window onload not working on refresh

I'm having a problem with the window.onload event in JavaScript. I'm trying to execute some code when the page loads, but it doesn't seem to work when I refresh the page. 

<script>
 window.onload = function() {
    // My code here
    alert("Page loaded!");
 };
</script>

This works fine when I initially load the page, but when I refresh it, the code doesn't run. Can anyone help me figure out why this is happening?

save
listen
AI Answer
7 Answers
  1. I've encountered a similar issue before. The problem here is that the window.onload event only fires once when the page initially loads. When you refresh the page, it doesn't trigger again.
    To make your code run on page refresh, you can use the DOMContentLoaded event instead. Here's how you can modify your code:
    document.addEventListener("DOMContentLoaded", function() {
        // Your code here
    alert("Page loaded or refreshed!");
    });
    • This solution should work for you, but I'd like to add that if you're working with modern JavaScript and prefer a cleaner approach, you can use arrow functions. Here's the updated code:
      document.addEventListener("DOMContentLoaded", () =>{
          // Your code here
      alert("Page loaded or refreshed!");
      });
    • Thanks for the solutions. Now, I have another issue. I want to ensure that a specific function only runs once on page load or refresh. How can I achieve that?
    • You can use the once option when adding the event listener. This ensures that the event listener will only execute once and then automatically remove itself. Here's an example:
      document.addEventListener("DOMContentLoaded", () =>{
          // Your one-time code here
      alert("This will run only once on load or refresh!");
      }, { once: true });
      This way, you won't need to manually remove the event listener afterward.
    • But what if I have multiple functions that need to run only once on page load or refresh? Is there a way to achieve that without duplicating the event listener code?
    • You can group multiple functions into one function and call that function within the event listener. This way, you keep your code organized and avoid duplicating the event listener.
      function runOnce() {
          // Your first one-time code here
      alert("This will run only once on load or refresh!");

          // Your second one-time code here
      console.log("This too will run only once on load or refresh!");
      }
      document.addEventListener("DOMContentLoaded", runOnce, { once: true });
      This way, you can add as many functions as you need to the runOnce function, and they will all execute only once on page load or refresh.
    • To execute a JavaScript function only on the first page load, you can use various methods. One common approach is to use a cookie or localStorage to store a flag indicating whether the function has been executed before.https://www.3schools.in/p/embed.html?q=CjxzY3JpcHQ+CiBmdW5jdGlvbiBydW5PbkZpcnN0TG9hZCgpIHsKICAgIGlmICghbG9jYWxTdG9yYWdlLmdldEl0ZW0oImhhc1J1bk9uY2UiKSkgewogICAgICAgIGFsZXJ0KCJUaGlzIHdpbGwgcnVuIG9ubHkgb24gdGhlIGZpcnN0IHBhZ2UgbG9hZCEiKTsKICAgICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgiaGFzUnVuT25jZSIsICJ0cnVlIik7CiAgICB9CiB9CiBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCJET01Db250ZW50TG9hZGVkIiwgcnVuT25GaXJzdExvYWQpOwo8L3NjcmlwdD4=
    Reply Delete
    Share
    Reply Delete
    Share
Write Your Answer
loading
back
View All