【JavaScript】window.onloadの使い方

2021年3月31日2024年4月11日

今回はJavaScriptのwindow.onloadの使い方について解説します。

window.onloadの使い方

JavaScriptのコードを記述する位置の話を先にしておきます。

window.onloadはDOM(いわゆるHTMLのデータたち)が読み込まれた後に発火(プログラムが動き出すこと)するように指示する関数です。

window.onloadを使わずにJSを書くことも可能ですが、実は失敗したりバグの原因になりがちです。

JavaScriptの仕組み

そもそもJavaScriptは記載する場所によってはバグります。

なぜかというと

HTMLのコードは上から下へ順番に読まれます。

 <head>
 <!-- A.ここにscriptを書く -->
  </head>
  <body>
    <div class="container">
        <h1 id="title">Hello, world!</h1>
    </div>
 <!-- B.ここにscriptを書く -->
  </body>

上記のようなコードがあったとします。

上から順番に読み込まれるため、Aの位置にscriptを書くと、全てのDOMが読み込まれる前にプログラムが走ることになるので、例えばh1の文字を変えるプログラムを書いても、まだh1が読み込まれていないためエラーが出ます。

このような理由からJavaScriptは</body>の手前に書くことが多くなっています。

window.onloadは気にせず使える

今回の本題であるwindow.onloadは前述のようなJavaScriptの癖のようなものを気にせずDOM読み込みを判断して動作させるようにしてくれます。

試しにh1のテキストを書き換えるプログラムを書いてみましょう。

  <head>
    <script>
        window.onload = function(){
            var title = document.getElementById('title');
            
            title.textContent = 'Title has been changed.'
        }   
    </script>
  </head>
  <body>
    <div class="container">
        <h1 id="title">Hello, world!</h1> 
    </div>
  </body>

ページ読み込み時にh1の’Hello world!’は’Title has been changed.’に変わっているのが確認できると思います。(ご自身の環境で試してみてください)

今回はhead内に書いてますが、window.onloadイベントを使用することでDOM読み込みをちゃんと待ってから動かしてくれているということですね。

リンクや画像の置換などでDOM読み込み後の動作というのは頻繁に使用しますので覚えておきましょう。