ページロード完了時のイベントを取得するには、onloadを使用します。
window.onloadを使うパターンと、bodyタグにonloadを記述するパターンを紹介します。
１．window.onloadを使うパターン
例）ページロード完了時にアラート表示する
|
1 2 3 |
window.onload = function(){ alert('ページが読み込まれました。'); } |
|
1 2 3 4 5 6 7 8 9 10 |
<html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body> <p>さんぷる</p> </body> </html> |
２．bodyタグにonloadを記述するパターン
例）ページロード完了時にアラート表示する
|
1 2 3 |
function myFnc(){ alert('ページが読み込まれました。'); } |
|
1 2 3 4 5 6 7 8 9 10 |
<html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body onload="myFnc();"> <p>さんぷる</p> </body> </html> |
解説
- onLoadイベント発生タイミングは、ページ読込みが完了した時点です。
- window.onloadで記述するパターンは、HTML側に何も記述する必要が無いため管理が楽です。