window.onload inside of Astro js not working

Question

I have a set of Astro components to be called by my App:

apps/myProject

libs/components/header

Inside the header.astro component, I have a script that I want to be run once the entire page is rendered:

<script is:inline>
  console.log('hej!');
  window.onload = (e) => {
    console.log('loaded!');
  };
</script>

The 'hej!' is being printed but not the 'loaded!' . Why is that?

For me, it is not clear how the component's lifecycle works in Astro, and I have followed this solution by adding the is:inline property to the script tag, but it still doesn't work.

Answer 1

Think of *.astro files as all server side, you cannot use <script>...</script> inside the

---
---

but you can use <script></script> in the html part of astro file. the below example works fine for me.

---
---

<script>
    console.log('hello');
    window.onload = (e) => {
        console.log('loaded!');
    };
</script>

<p>hello world!</p>

Answer 2

You should be able to use load modules on the client with hoist .

<script type="module" hoist>
  console.log('loaded!');
</script>

window.onload isn't necessary since ES modules are automatically deferred.

Answer 3

Solution

The solution shall be as simple as

<script is:inline>
    console.log('hej!');
    console.log('loaded!');
</script>

which yields

Misunderstandings and Misleading solutions

question solution proposal

this script inside a page.astro works, in case the question pretend that it does not, it is very important to provide more elements like a complete example project as the error is most likely somewhere else not in the provided code.

<script is:inline>
  console.log('hej!');
  window.onload = (e) => {
    console.log('loaded!');
  };
</script>

I took it in a default astro example and it yields the following output

but is not ideal because window.onload is not needed: see When to use "window.onload"?

see astro official examples to take as test basis here ( https://github.com/withastro/astro/tree/main/examples )

adding frontmatter separation

The solution below unnecessarily adds --- --- which is an optional frontmatter entry, when not available then the content is interpreted as the second body part which is where the script is supposed to be located

---
---

<script>
    console.log('hello');
    window.onload = (e) => {
        console.log('loaded!');
    };
</script>

adding type module or hoist

please udpate and see https://docs.astro.build/en/migrate/#new-default-script-behavior

from there you get to know that:

• BREAKING : <script hoist> is the new default <script> behavior. The hoist attribute has been removed. To use the new default behaviour, make sure there are no other attributes on the <script> tag. For example, remove type="module" if you were using it before.

using is:inline

The question author has been mislead by another post ( How to use document and window element in astro JS? ), taken as granted which is wrong and I submitted an answer to correct it because is:inline inside <script> is not needed and has unintended side effects like unnecessarily duplicating the script code, see a direct link to this answer there How to use document and window element in astro JS?