创建一个 script 元素，并将其附加到 head 元素的子列表的最后。该 script 元素将加载 js/test.js 文件，加载完成之后将调用其中的方法或引用其中的变量：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建 script 元素并加载指定的 JS 文件</title>
</head>
<body>
<script type="text/javascript">
window.onload = (event) => {
const onLoadCallback = (event) => {
console.log(event)
func() // 调用 js/test.js 文件中的方法
console.log(data) // 引用 js/test.js 文件中的变量
}
const onErrorCallback = (error) => {
console.error(error)
}
jsLoader('js/test.js', onLoadCallback, onErrorCallback)
}
function jsLoader(src, onLoadCallback, onErrorCallback) {
// https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
const element = document.createElement('script')
// https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
element.setAttribute('type', 'text/javascript')
element.setAttribute('src', src)
element.onload = onLoadCallback
element.onerror = onErrorCallback
// https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
document.head.appendChild(element)
}
</script>
</body>
</html>
js/test.js 文件：
const func = () => {
console.log('Hello World!')
}
const data = {
filename: 'text.js' }
效果：
