記事ディレクトリ
window.onload の紹介
window.onload() メソッドは、 Web ページがロードされた直後に実行される操作に使用されます。つまり、HTML ドキュメントがロードされた直後にメソッドが実行されます。
window.onload() は通常、ページが完全にロードされた後にスクリプト コードを実行する要素に使用されます (画像、css ファイルなどを含む)。
実行する関数構文は 1 つだけです。
window.onload = funcRef;
funcRef メソッドは、ページが読み込まれた後に呼び出されます。
実行する関数構文は複数あります。
window.onload=function(){
Func1();
Func2();
Func3();
.....
}
ページがロードされた後、Func1、Func2、および Func3 が順次自動的に実行されます。
window.onload() を使用する理由
JavaScript の関数やメソッドは HTML ドキュメントのレンダリングが完了してからしか使用できないため、レンダリングが完了していない場合、この時点で DOM ツリーが不完全なため、一部の JavaScript コードを呼び出すと、「未定義」エラーが発生する場合があります。報告されます。
次のコードを試して、どのような効果があるかを確認できます
<!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" さセットアップに成功しません。エラー メッセージは次のとおりです
。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">
// 函数名为 runoob
window.onload=function runoob(){
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 runoob1(){
document.getElementById("bg").style.backgroundColor="#F00";
}
function runoob2(){
document.getElementById("bg").style.width="200px";
document.getElementById("bg").style.height="200px";
}
runoob1();
runoob2();
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
window.onload と jQuery ready() の違い
window.onload = function () {}; // JavaScript
$(document).ready(function () {}); // jQuery
上記の 2 つのメソッドは、HTML ドキュメントが完成した後に DOM 操作を実行しますが、次の図に示すように、いくつかの違いがあります。
参考：初心者向けチュートリアル JavaScript window.onload