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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: GlobalEventHandlers.onload
slug: Web/API/GlobalEventHandlers/onload
tags:
- API
- Event Handler
- GlobalEventHandlers
- HTML DOM
- Property
- Reference
- onload
translation_of: Web/API/GlobalEventHandlers/onload
---
<div>{{ApiRef()}}</div>
<div>Die <strong><code>onload</code></strong>-Eigenschaft der {{domxref("GlobalEventHandlers")}} ist ein Ereignis-Handler für das <code>load</code>-Ereignis eines {{domxref("Window")}}s, {{domxref("XMLHttpRequest")}}s, {{htmlelement("img")}}-Elements, etc., der aufgerufen wird, wenn die Ressource fertig geladen hat.</div>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">window.onload = <em>funcRef</em>;
</pre>
<h3 id="Value">Value</h3>
<p><code>funcRef</code> ist die Handler-Funktion, die aufgerufen wird, wenn das <code>load</code>-Ereignis des Windows eintritt.</p>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: js">window.onload = function() {
init();
etwasAnderesTun();
};
</pre>
<pre class="brush: html"><!doctype html>
<html>
<head>
<title>onload-Test</title>
// ES5
<script>
function load() {
console.log("load-Ereignis festgestellt!");
}
window.onload = load;
</script>
// ES2015
<script>
const load = () => {
console.log("load-Ereignis festgestellt!");
}
window.onload = load;
</script>
</head>
<body>
<p>Das load-Ereignis tritt ein, wenn das Dokument fertig geladen ist!</p>
</body>
</html>
</pre>
<h2 id="Anmerkungen">Anmerkungen</h2>
<p>Das <code>load</code>-Ereignis tritt am Ende des Dokumentladeprozesses ein. An diesem Punkt befinden sich alle Objekte des Dokuments im DOM und alle Grafiken, Skripte, Links und Sub-Frames sind vollständig geladen.</p>
<p>Es gibt zudem <a href="https://developer.mozilla.org/de/docs/Web/Events">Gecko-spezifische DOM-Ereignisse</a> wie <code>DOMContentLoaded</code> und <code>DOMFrameContentLoaded</code> (welches mit {{domxref("EventTarget.addEventListener()")}} gehandhabt werden kann), die eintreten, nachdem sich der DOM der Seite aufgebaut hat, aber nicht darauf warten, dass andere Ressourcen fertig geladen wurden.</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Anfängliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><code>DOMContentLoaded</code>-Ereignis in <a href="/en-US/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">Listening to events: Simple DOM events</a></li>
<li>IIFE <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" rel="nofollow noreferrer">Immediately-invoked function expression</a></li>
</ul>
|
