Window onload not working on refresh

Question

Anonymous · Answer 1

Anonymous • October 09, 2023

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!");
});

6

Delete

Anonymous • October 09, 2023

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!");
});

1

Delete

Anonymous • October 09, 2023

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?

1

Delete

Anonymous • October 09, 2023

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.

1

Delete

Anonymous • October 09, 2023

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?

1

Delete

Anonymous • October 09, 2023

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.

1

Delete

Anonymous • October 09, 2023

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=

1

Delete

3 more replies

Window onload not working on refresh

Related Questions

Comments (7)

Window onload not working on refresh