ほうしう北京へおでかけ
＞ 趣味のホームページ ＞ JavaScript

onload:ページが読み込まれたら処理

テンプレートなどを使って共通のページを作成した場合、<body onload="～">が変更になった際には、すべてのページをアップロードしなおさないといけません。

それを防ぐためのトピックです。

onload:ページが読み込まれたら処理

ページが読み込まれたら何か処理を行わせる場合、<body onload="～">のようにbodyタグにonloadを記述してスクリプトを呼び出すことは多い。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
</head>
<body onload="alert('会いたくても会えないときはどうすれば？')">
<p>ページが読み込まれるとメッセージを表示します</p>
</body>
</html>

しかし保守性の面から考えるとHTMLファイルとJavaScriptファイルは分離した方が簡単です。そうしないと関連するすべてのファイルをアップロードしないといけなくなります。

bodyタグのonloadと同じ処理を行う場合にはwindowオブジェクトのonloadイベントハンドラを設定します。

<body onload="alert('会いたくても会えないときはどうすれば？')">
は
window.onload = function(){ alert('会いたくても会えないときはどうすれば？') }
と書きます。

■HTMLファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>ページが読み込まれるとメッセージを表示します</p>
</body>
</html>

■スクリプトファイル (message.js)

window.onload = function() {
alert("会いたくても会えないときはどうすれば？");
}

Javascript サンプルはここから