などのメリットがあります。
onload属性を使う場合は、以下のように HTMLを書きます。
<body onload="firstscript();">
上記のように記述すれば、読み込みが完了した時点で、firstscript関数が実行されます。
関数を別途用意するまでもない場合は、下記のように属性値に直接スクリプトを書くこともできます。
<body onload="alert('ページの読み込みが完了したよ！');">
このとき、onload属性の値を二重引用符(ダブルクォーテーション記号)で囲んでいるなら、中身の JavaScriptソース中で引用符が必要になった場合は、シングルクォーテーション記号を使います。ソース中でダブルクオーテーション記号を使ってしまうと、そこで onload属性の値が終わったと判断されてしまって、うまく動きません。
HTMLソースに手を加えることなく、JavaScript側だけで onloadイベントを使って何らかの処理を実行したい場合は、以下のように window.onloadメソッドを使って JavaScriptソースを記述します。
// 処理の中身
function firstscript() {
alert('ページの読み込みが完了したよ！');
}
// ページの読み込み完了と同時に実行されるよう指定
window.onload = firstscript;
上記のように記述すれば、ウェブページの読み込みが完了した時点で、2～4行目で記述した firstscript関数が実行されます。
なお、この firstscript関数を「ページの読み込み直後」以外のシーンで使うことがないのであれば、わざわざ別の関数としては定義せずに、以下のように無名関数として記述する方が楽です。
window.onload = function() {
// 実行したい処理
alert('ページの読み込みが完了したよ！');
}
上記の書き方だと、onloadイベントが発生した際に実行されるスクリプトの中身を直接記述していますので、ソースが短く分かりやすくなります。
同じスクリプト内で２度実行すると、行数が後ろの方のみ実行されます。
window.onload = function() {
alert('①ページの読み込みが完了したよ！');
}
window.onload = function() {
alert('②ページの読み込みが完了したよ！');
}
この場合、「②ページの読み込みが…」のみ表示されます。
ちなみに、addEventListenerメソッドを利用して、以下のように記述することもできます。
document.addEventListener("load", function() {
// 実行したい処理
alert('ページの読み込みが完了したよ！');
});
上記の場合、「onload」ではなく「load」なので注意して下さい。
load時に読み込ませる jQueryの書き方
$(window).on('load',function(){
alert('ページの読み込みが完了したよ！');
});