window.onload()このメソッドは、ウェブページの読み込み完了直後に操作を実行するために使用されます。つまり、HTML ドキュメントの読み込みが完了すると、すぐに何らかのメソッドを実行します。
window.onload()通常は <body> 要素で使用され、ページが完全に読み込まれた後（画像や CSS ファイルなどを含む）にスクリプトコードを実行します。
実行する関数が1つだけの場合の構文：
window.onload = funcRef;
ページの読み込みが完了すると、funcRef メソッドが呼び出されます。
実行する関数が複数ある場合の構文：
window.onload=function(){
Func1();
Func2();
Func3();
.....
}
ページの読み込みが完了したら、Func1、Func2、Func3 を順番に実行します。
なぜ window.onload() を使うのか？
JavaScript の関数メソッドは、HTML ドキュメントのレンダリングが完了した後にのみ使用できるためです。レンダリングが完了していない場合、その時点の DOM ツリーは不完全であり、そのため一部の JavaScript コードを呼び出すと "undefined" エラーが発生する可能性があります。
実例
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>window.onload() を使用しないテスト</title>
<style type="text/css">
#bg{
width:120px;
height:120px;
border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
上記の実例で実現したい効果は、div の背景色を #F90 に設定することでしたが、その効果は実現されませんでした。コードは順番に実行されるため、次の箇所を実行する時点ではdocument.getElementById("#bg").style.backgroundColor="#F00"の時点で、まだこの div オブジェクトが読み込まれていないため、背景色の設定に失敗しました。エラー情報は以下のとおりです。
window.onload を追加すれば正常に実行できます。コードを次のように修正します：
実例
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>window.onload() を使用したテスト</title>
<style type="text/css">
#bg{
width:120px;
height:120px;
border:4px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("bg").style.backgroundColor="#F00";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
window.onload イベントはイベント処理関数をバインドします。バインドするのは匿名関数ですが、もちろん名前付き関数もバインドできます。コード実例は以下のとおりです。
実例
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>window.onload() を使用して具体的な関数をバインドする</title>
<script type="text/javascript">// 関数名は サンプル
window.onload=function サンプル(){
document.write("初心者向けチュートリアル -- 学ぶのは技術だけでなく、夢でもあります！！！");
}</script>
</head>
<body>
</body>
</html>
実行する関数が複数ある場合の実例：
実例
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>window.onload() を使用して複数の関数を実行する</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
function サンプル1(){
document.getElementById("bg").style.backgroundColor="#F00";
}
function サンプル2(){
document.getElementById("bg").style.width="200px";
document.getElementById("bg").style.height="200px";
}
サンプル1();
サンプル2();
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
window.onload と jQuery ready() の違い
window.onload = function () {}; // JavaScript
$(document).ready(function () {}); // jQuery
上記の2つの方法はどちらも HTML ドキュメントの読み込み完了後に DOM 操作を実行しますが、それでも一定の違いがあります。下図のとおりです。
