ファイルloader.js：
function main()
{
if (typeof window !== 'undefined') {
var script = window.document.createElement('script')
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js'
script.onload = function () { console.log('script loaded') }
window.onload = function () { console.log('window loaded') }
window.document.head.appendChild(script)
} else {
console.log('window not available yet')
}
}
if (typeof module !== 'undefined' && module.exports) {
exports.main = main
}
main()
ファイルwindow.html：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="loader.js"></script>
</head>
<body>
<div>Test</div>
</body>
</html>
このHTMLページを開いたときのコンソール出力：
script loaded
window loaded
私の質問：
上記のコードでは、スクリプトのonloadイベントが常にウィンドウのonloadの前に発生することが保証されていますか？
はい。loadイベントは「リソースとその依存リソースの読み込みが完了したときに」発生するため、表示される出力は保証されています。windowまで完全にはロードされません全てのダウンロードに何かを持つ要素は、スクリプトや画像など、ダウンロードされ、準備ができています。したがって、<script>をロードする前にロードする必要がありwindowます。
動的に作成されるスクリプトがあるという事実は効果がありません（mainコードのように、ウィンドウが完全にロードされる前に呼び出されると仮定します）-DOMに挿入されると、ウィンドウが依存するものになります。loadウィンドウが行う前にする必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加