files/ja/web/api/globaleventhandlers/onload/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

---
title: window.onload
slug: Web/API/GlobalEventHandlers/onload
tags:
  - DOM
  - Gecko
  - Gecko DOM Reference
  - Window
translation_of: Web/API/GlobalEventHandlers/onload
---
<div>
 {{ApiRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>{{domxref("window")}} の <code>load</code> イベントに対応するイベントハンドラです。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">window.onload = <var>funcRef</var>;
</pre>
<ul>
 <li><var>funcRef</var> : <code>load</code> イベント発生時に呼び出す関数への参照または関数式</li>
</ul>
<h2 id="Example" name="Example">例</h2>
<pre class="brush:js">window.onload = function() {
  doSomething(); // DOM 構築後に実行したい関数の呼び出し
};
</pre>
<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;onload のテスト&lt;/title&gt;

&lt;script&gt;
function load() {
  alert("load イベントが発生しました。");
}

window.onload = load;
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;文書の読み込みの完了時に load イベントが発生します。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Notes" name="Notes">注記</h2>
<p><code>load</code> イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。</p>
<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような Gecko で定められた <a href="/ja/docs/Web/Reference/Events">DOM イベント</a> (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 <code>window.onload</code> より先に発生します。</p>
<h2 id="Specification" name="Specification">仕様</h2>
<ul>
 <li><a href="http://www.whatwg.org/html/#handler-window-onload">http://www.whatwg.org/html/#handler-window-onload</a></li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
 <li><a href="/ja/docs/Listening_to_events_in_Firefox_extensions">Firefox 拡張機能内でのイベントのリスニング</a></li>
</ul>