onload
イベントハンドラのonloadについて、サンプルコードを示しながら使い方を説明しています。
onloadの基本的な使い方
イベントハンドラのonloadは、ページや画像などの読み込みが完了した時に処理を実行できます。
以下は、利用例です。
window.onload = function(){alert("テストです");};
上記は、ページが表示された時にアラートが表示されます。ページをリロードした時も同じです。
赤字部分は、無名関数で直接alertを記述していますが、func1などと関数を呼び出すこともできます。その時はwindow.onload = func1;と記述します。func1の後に()がない点を留意してください。
ページ読み込み時にスクロールさせる
ページ読み込み時にスクロールさせる例です。
window.onload = function(){window.scrollTo(0,100);};
window.scrollToは、横と縦のスクロール量をpxで指定します。このため、上記はページが100px下にスクロールして表示されます。
画像読み込み時に処理を実行する
以下のように、画像読み込み時に処理を実行させることもできます。
<img src="image.png" alt="テスト画像" id="test-load">
<script>
const x = document.querySelector("#test-load");
x.onload = function(){alert("テストです");};
</script>
赤字部分の1行目でid:test-loadをオブジェクトとして参照し、2行目でloadイベントを登録しています。
画像が存在せずに読み込みが完了しない時は、アラートは表示されません。
iframeで別ファイルを読み込む時も、同様に使えます。
HTMLの属性として記述する(非推奨)
onloadは、HTMLの属性としても記述できます。
<body onload="alert('テストです');">
bodyタグで、onload属性によってalertを実行しています。これでも、同じ動作をします。
属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティ(x.onloadなど)で記述するか、イベントリスナーを使って記述がお薦めです。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
load | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
load | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
「イベントハンドラ一覧」に戻る