onloadイベント
例
ページが読み込まれた直後にJavaScriptを実行します。
<body onload="myFunction()">
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
onloadイベントは、オブジェクトがロードされたときに発生します。
onloadは、ほとんどの場合、Webページがすべてのコンテンツ（画像、スクリプトファイル、CSSファイルなどを含む）を完全にロードした後でスクリプトを実行するために<body>要素内で使用されます。
onloadイベントを使用して、訪問者のブラウザーの種類とブラウザーのバージョンを確認し、その情報に基づいて適切なバージョンのWebページをロードできます。
onloadイベントは、Cookieの処理にも使用できます（以下の「その他の例」を参照）。
ブラウザのサポート
| Event | |||||
|---|---|---|---|---|---|
| onload | Yes | Yes | Yes | Yes | Yes |
構文
HTMLの場合：
<element onload="myScript">
JavaScriptの場合：
object.onload = function(){myScript};
JavaScriptでは、addEventListener（）メソッドを使用します。
object.addEventListener("load", myScript);
注： addEventListener （）メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
| 泡： | 番号 |
|---|---|
| キャンセル可能： | 番号 |
| イベントタイプ： | ユーザーインターフェイスから生成された場合はUiEvent 、それ以外の場合はEvent。 |
| サポートされているHTMLタグ： | <body>、<frame>、<iframe>、<img>、<input type = "image">、<link>、<script>、<style> |
| DOMバージョン： | レベル2のイベント |
その他の例
例
<img>要素でonloadを使用します。画像が読み込まれた直後に「画像が読み込まれました」というアラートが表示されます。
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
例
onloadイベントを使用してCookieを処理する：
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>