module を使えば動的に作った script を順番に実行できる
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ HTML に書いた script タグは書いた順に実行される
◆ JavaScript で挿入した script タグは src 属性したものより先に innerHTML を使ったもの
◆ module に指定すれば JavaScript で挿入した script タグでも実行順にできる
◆ JavaScript で挿入した script タグは src 属性したものより先に innerHTML を使ったもの
◆ module に指定すれば JavaScript で挿入した script タグでも実行順にできる
普通に script タグ
普通の script タグは src 属性もインラインのスクリプトでも書いた順に実行されます[main.html]
<script src="file.js"></script>
<script>console.log("inline")</script>
<script>console.log("inline")</script>
[file.js]
console.log("file")
file
inline
inline
JavaScript で script タグ
defer と async を false にしても JavaScript で script タグを作ると inline が先に実行されます<script>
const loadScript = obj => {
const elem = Object.assign(document.createElement("script"), obj, {
defer: false,
async: false,
})
document.head.append(elem)
}
loadScript({src: "file.js"})
loadScript({innerHTML: `console.log("inline")`})
</script>
const loadScript = obj => {
const elem = Object.assign(document.createElement("script"), obj, {
defer: false,
async: false,
})
document.head.append(elem)
}
loadScript({src: "file.js"})
loadScript({innerHTML: `console.log("inline")`})
</script>
inline
file
file
JavaScript で script タグ (module)
JavaScript で script タグを作っても module にすると順番に実行されます<script>
const loadScript = obj => {
const elem = Object.assign(document.createElement("script"), obj, {
defer: false,
async: false,
type: "module",
})
document.head.append(elem)
}
loadScript({src: "file.js"})
loadScript({innerHTML: `console.log("inline")`})
</script>
const loadScript = obj => {
const elem = Object.assign(document.createElement("script"), obj, {
defer: false,
async: false,
type: "module",
})
document.head.append(elem)
}
loadScript({src: "file.js"})
loadScript({innerHTML: `console.log("inline")`})
</script>
file
inline
inline
通常の script だと innerHTML を指定すると同期的に実行され src 属性を指定すると非同期的に実行されます
module になると innerHTML を指定しても src 属性と同じ非同期的に処理されて読み込まれた順になります