[英]window.onload inside of Astro js not working
I have a set of Astro components to be called by my App:我的应用程序调用了一组 Astro 组件:
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:在 header.astro 组件中,我有一个脚本,我希望在呈现整个页面后运行该脚本:
<script is:inline>
console.log('hej!');
window.onload = (e) => {
console.log('loaded!');
};
</script>
The 'hej!'
'hej!'
is being printed but not the 'loaded!'
正在打印但不是
'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.对我来说,不清楚组件的生命周期在 Astro 中是如何工作的,我已经通过将
is:inline
属性添加到脚本标签来遵循这个解决方案,但它仍然不起作用。
Think of *.astro
files as all server side, you cannot use <script>...</script>
inside the将
*.astro
文件视为所有服务器端,您不能在内部使用<script>...</script>
---
---
but you can use <script></script>
in the html part of astro file.但是您可以在 astro 文件的 html 部分中使用
<script></script>
。 the below example works fine for me.下面的例子对我来说很好。
---
---
<script>
console.log('hello');
window.onload = (e) => {
console.log('loaded!');
};
</script>
<p>hello world!</p>
You should be able to use load modules on the client with hoist
.您应该能够通过
hoist
在客户端上使用加载模块。
<script type="module" hoist>
console.log('loaded!');
</script>
window.onload
isn't necessary since ES modules are automatically deferred. window.onload
不是必需的,因为 ES 模块会自动延迟。
The solution shall be as simple as解决方案应尽可能简单
<script is:inline>
console.log('hej!');
console.log('loaded!');
</script>
which yields哪个产量
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. page.astro
中的这个脚本有效,以防问题假装它不有效,提供更多元素(如完整的示例项目)非常重要,因为错误很可能出现在其他地方而不是在提供的代码中。
<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我把它放在一个默认的 astro 示例中,它产生了以下输出
but is not ideal because window.onload is not needed: see When to use "window.onload"?但并不理想,因为不需要 window.onload:请参阅何时使用“window.onload”?
see astro official examples to take as test basis here ( https://github.com/withastro/astro/tree/main/examples )在此处查看astro官方示例作为测试基础( https://github.com/withastro/astro/tree/main/examples )
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下面的解决方案不必要地添加了
--- ---
这是一个可选的 frontmatter 条目,当不可用时,内容将被解释为第二个正文部分,即脚本应该位于的位置
---
---
<script>
console.log('hello');
window.onload = (e) => {
console.log('loaded!');
};
</script>
please udpate and see https://docs.astro.build/en/migrate/#new-default-script-behavior请更新并查看https://docs.astro.build/en/migrate/#new-default-script-behavior
from there you get to know that:从那里你会知道:
<script hoist>
is the new default <script>
behavior. <script hoist>
是新的默认<script>
行为。 The hoist
attribute has been removed. hoist
属性已被删除。 To use the new default behaviour, make sure there are no other attributes on the <script>
tag.<script>
标记上没有其他属性。 For example, remove type="module"
if you were using it before.type="module"
,请删除它。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?问题作者被另一篇文章误导了( How to use document and window element in astro JS? ),认为这是错误的,我提交了一个答案来更正它,因为不需要
is:inline
inside <script>
并且有意外的副作用,例如不必要地复制脚本代码,请在How to use document and window element in astro JS 中查看此答案的直接链接?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.