Astro js 中的 window.onload 不工作

Question

我的應用程序調用了一組 Astro 組件：

apps/myProject

libs/components/header

在 header.astro 組件中，我有一個腳本，我希望在呈現整個頁面后運行該腳本：

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

'hej!' 正在打印但不是'loaded!' . 這是為什么？

對我來說，不清楚組件的生命周期在 Astro 中是如何工作的，我已經通過將is:inline屬性添加到腳本標簽來遵循這個解決方案，但它仍然不起作用。

Answer 1

將*.astro文件視為所有服務器端，您不能在內部使用<script>...</script>

---
---

但是您可以在 astro 文件的 html 部分中使用<script></script> 。 下面的例子對我來說很好。

---
---

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

<p>hello world!</p>

Answer 2

您應該能夠通過hoist在客戶端上使用加載模塊。

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

window.onload不是必需的，因為 ES 模塊會自動延遲。

Answer 3

解決方案

解決方案應盡可能簡單

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

哪個產量

誤解和誤導性解決方案

問題解決方案

page.astro中的這個腳本有效，以防問題假裝它不有效，提供更多元素（如完整的示例項目）非常重要，因為錯誤很可能出現在其他地方而不是在提供的代碼中。

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

我把它放在一個默認的 astro 示例中，它產生了以下輸出

但並不理想，因為不需要 window.onload：請參閱何時使用“window.onload”？

在此處查看astro官方示例作為測試基礎（ https://github.com/withastro/astro/tree/main/examples ）

添加 frontmatter 分離

下面的解決方案不必要地添加了--- ---這是一個可選的 frontmatter 條目，當不可用時，內容將被解釋為第二個正文部分，即腳本應該位於的位置

---
---

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

添加類型模塊或提升機

請更新並查看https://docs.astro.build/en/migrate/#new-default-script-behavior

從那里你會知道：

• BREAKING ： <script hoist>是新的默認<script>行為。 hoist屬性已被刪除。 要使用新的默認行為，請確保<script>標記上沒有其他屬性。 例如，如果您以前使用過type="module" ，請刪除它。

使用是：內聯

問題作者被另一篇文章誤導了（ How to use document and window element in astro JS? ），認為這是錯誤的，我提交了一個答案來更正它，因為不需要is:inline inside <script>並且有意外的副作用，例如不必要地復制腳本代碼，請在How to use document and window element in astro JS 中查看此答案的直接鏈接？