【JavaScript】window.onloadが複数回使えない時の対処法

Last updated at 2023-02-24Posted at 2023-02-24

JavaScriptのwindow.onloadが走らない状況に陥ったので
同じことが起きても忘れないよう備忘録として。。

状況

Vue.jsで実装していた内容をJavaScriptで書き直そうとした際に、window.onloadの処理が走らない。

Vue.js（書き直し前）

main.js

const app = createApp({
  mounted() {
    console.log('[Vuejs]ページが読み込まれました');
  }
});

JavaScript（書き直し後）

main.js

window.onload = function () {
  console.log('[JavaScript]ページが読み込まれました');
};

上記のように書き直したらconsole.log('[JavaScript]ページが読み込まれました')が走らない。

window(ブラウザ)に渡したコールバックは上書きされてしまうため
window.onloadは複数回使えない。
（他に読み込んでいたjsでwindow.onloadが実装されていた。）

window.addEventListenerで実装するように変更。

main.js

window.addEventListener('load', function () {
  console.log('[JavaScript]ページが読み込まれました');
};