HTML - 在頭部或正文中添加腳本（以翻譯 DOM）？

Question

我正在執行以下操作來翻譯我的 html 頁面：

<head>
  <script type="module" src="js/scripts/home.js"></script>
</head>

<body>
  <h1 id="hello">Hello world!</h1>
</body>

和

import $ from "jquery";

import { t } from "../lib/i18n";

function main() {
  $("#hello").text(t("hello"));
}

main();

我不明白為什么會這樣，我認為，為了操作 DOM，我們應該等待它准備好......

另一方面，如果我將腳本添加到正文標記的末尾，則外觀更差，因為在翻譯之前有一點超時。

<body>
  <h1 id="hello">Hello world!</h1>
  <script type="module" src="js/scripts/home.js"></script>
</body>

另一個具有相同行為的選項是在頭部包含腳本，但將 js 代碼更改為：

import $ from "jquery";

import { t } from "../lib/i18n";

function main() {
  $("#hello").text(t("hello"));
}

$(main); // on DOM ready <---------

go 的建議方法是什么，為什么？

Answer 1

有關腳本元素，請參閱 MDN 文檔：

推遲

此 Boolean 屬性設置為向瀏覽器指示腳本應在文檔被解析之后但在觸發 DOMContentLoaded 之前執行。

具有 defer 屬性的腳本將阻止 DOMContentLoaded 事件觸發，直到腳本加載並完成評估。

警告：如果 src 屬性不存在（即對於內聯腳本），則不得使用此屬性，在這種情況下它將不起作用。

defer 屬性對模塊腳本沒有影響——默認情況下它們會延遲。

由於它是一個模塊，它是自動延遲的，所以在 DOM 准備好之前不會運行，因此您不需要編寫任何 JS 來顯式等待 DOM 准備好。

Answer 2

您可以在腳本屬性中使用defer 。 或者在body標簽下寫腳本標簽，在html標簽中。

HTML - 在頭部或正文中添加腳本（以翻譯 DOM）？

問題描述

2 個解決方案

解決方案1
2 2022-08-28 19:12:50

解決方案2
0 2022-08-28 20:10:33

HTML - 在頭部或正文中添加腳本（以翻譯 DOM）？

問題描述

2 個解決方案

解決方案1 2 2022-08-28 19:12:50

解決方案2 0 2022-08-28 20:10:33

解決方案1
2 2022-08-28 19:12:50

解決方案2
0 2022-08-28 20:10:33