onload evenement
Voorbeeld
Voer direct een JavaScript uit nadat een pagina is geladen:
<body onload="myFunction()">
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De gebeurtenis onload vindt plaats wanneer een object is geladen.
onload wordt meestal gebruikt binnen het <body>-element om een script uit te voeren zodra een webpagina alle inhoud volledig heeft geladen (inclusief afbeeldingen, scriptbestanden, CSS-bestanden, enz.).
De onload-gebeurtenis kan worden gebruikt om het browsertype en de browserversie van de bezoeker te controleren en de juiste versie van de webpagina te laden op basis van de informatie.
De onload-gebeurtenis kan ook worden gebruikt om met cookies om te gaan (zie "Meer voorbeelden" hieronder).
Browserondersteuning
Event | |||||
---|---|---|---|---|---|
onload | Yes | Yes | Yes | Yes | Yes |
Syntaxis
In HTML:
<element onload="myScript">
In javascript:
object.onload = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("load", myScript);
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
bubbels: | Nee |
---|---|
Annuleerbaar: | Nee |
Evenementtype: | UiEvent indien gegenereerd vanuit een gebruikersinterface, anders Event . |
Ondersteunde HTML-tags: | <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> |
DOM-versie: | Niveau 2 Evenementen |
Meer voorbeelden
Voorbeeld
Onload gebruiken op een <img> element. Waarschuw "Afbeelding is geladen" onmiddellijk nadat een afbeelding is geladen:
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Voorbeeld
De onload-gebeurtenis gebruiken om met cookies om te gaan:
<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>