3schools

Web Tools Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu January 19, 2024 › #Javascript › #Q&A
❌

window onload is not a function

Hey everyone, I'm having a problem with the error message 'window.onload is not a function.' Here's my code:

<script>
 window.onload = function() {
    // Some code here
 };
</script>

So, I'm trying to execute some code when the page loads, but I keep getting this error. Can someone please help me understand why this is happening and how to fix it?

save
listen
AI Answer
5 Answers
Write Your Answer
  1. I see what you're facing. This error often occurs when there's a conflict with the window.onload event handler. To fix it, you can use an alternative approach like this:
    window.addEventListener('load', function() {
        // Your code here
    });
    This code adds an event listener for the load event, which is a safer way to execute code when the page loads. It won't conflict with other scripts that might have set window.onload differently.
    • That worked perfectly. Now, I have another question related to this. What if I want to use jQuery to achieve the same thing?
      $(window).on('load', function() {
          // Code with jQuery
      });
      But it's not working as expected. Any ideas on how to make this work with jQuery?
    • I can help with that. The issue you're facing with jQuery is because you need to ensure the DOM is ready before using jQuery functions. Here's the correct way to do it:
      $(document).ready(function() {
          // Your jQuery code here
      });
      This way, your jQuery code will execute only after the DOM is fully loaded, which is equivalent to window.onload.
    • Thank you! That solved my jQuery problem. Now, I'm facing an issue with asynchronous code inside my window.onload function. It doesn't seem to work as expected. Here's an example:
      https://www.3schools.in/p/embed.html?q=CjxzY3JpcHQ+CiB3aW5kb3cub25sb2FkID0gZnVuY3Rpb24oKSB7CiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgewogICAgICAgIGNvbnNvbGUubG9nKCJEZWxheWVkIGxvZyIpOwogICAgfSwgMTAwMCk7CiAgICAKICAgIGNvbnNvbGUubG9nKCJJbW1lZGlhdGUgbG9nIik7CiB9Owo8L3NjcmlwdD4=
      The immediate log appears before the delayed one. How can I ensure the delayed code executes after the immediate one?
    • I understand your issue. The reason for this behavior is that the setTimeout function is asynchronous. To make it execute after the immediate log, you can nest your code like this:
      https://www.3schools.in/p/embed.html?q=CjxzY3JpcHQ+CiB3aW5kb3cub25sb2FkID0gZnVuY3Rpb24oKSB7CiAgICBjb25zb2xlLmxvZygiSW1tZWRpYXRlIGxvZyIpOwoKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24oKSB7CiAgICAgICAgY29uc29sZS5sb2coIkRlbGF5ZWQgbG9nIik7CiAgICB9LCAxMDAwKTsKIH07Cjwvc2NyaXB0Pg==
      By placing the console.log("Immediate log"); before the setTimeout, it ensures that the immediate log gets executed first, followed by the delayed log after the specified timeout.
    Reply Delete
    Share
    Reply Delete
    Share
loading
back
View All