auの日記

プログラミング初心者の日記。(auはハンドルネームです)

JavaScriptでページ読み込み時にコードを実行する方法

auです。

JavaScriptをHTMLで記述している際に、ロード時にAPIを叩き、その情報をもとにグシャグシャしていくということをやりました。

Google Maps APIを利用した際は、Google Maps APIを埋め込む際に、関数を実行するオプションを書くことができるので解決していました。

callback=initMapのところで、initMapのAPIを呼んでいます。

<!-- Google Map API -->
<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key={Your API}&callback=initMap" async defer></script>

スクリプト読み込み時に実行する方法

ファイルの中にこの1行を追加するとできます。

window.addEventListener('load', init);

// ファイル読み込み時に実行される
function init() {
    ...
}

めちゃめちゃ簡単だった・・・。

ライフサイクルとか詳しく調べると、もっと適切な処理方法が見つかるかもしれないと感じました。