Over beforeUnload
Deze pagina ziet er op het eerste gezicht niet erg bijzonder uit, maar als je hem verlaat verschijnt er een melding zoals in onderstaande figuur, of iets dat er op lijkt.
Hierbij kan soms nog worden aangevinkt dat de pagina dit soort vragen niet meer mag stellen.
Je maakt dit met behulp van het DOM-event beforeUnload. Dit event wordt afgevuurd net voor de pagina wordt verlaten.
Door aan beforeUnload een script te koppelen, kun je een bevestiging vragen voordat de pagina daadwerkelijk wordt verlaten.
Ooit kon je hier alles in zetten wat je wilde, maar tegenwoordig beperkt dit zich tot een default-melding die niet veranderd
kan worden. Dat komt doordat een "eigen" script gemakkelijk kan worden misbruikt voor het plaatsen van malware.
De dummy-function kan niet worden weggelaten, omdat er op een event alleen gereageerd kan worden via een function.
Er zijn drie manieren om beforeUnload te gebruiken:
- Met het attribuut onbeforeunload in de <body>-tag. De code is:
<body onbeforeunload="return dummy()">
<script>
function dummy() {
return "Dit is nodig, maar werkt niet...";
}
</script>
Het script zet je bovenin of onderaan de <body> of in de <head>. - Met een window.onload-statement in JavaScript. De code is:
<script>
window.onbeforeunload = function(event) {
event.returnValue = "Dit is nodig, maar werkt niet...";
};
</script>
Het script zet je bovenin of onderaan de <body> of in de <head>. - Met een addEventListener-statement in JavaScript. De code is:
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Dit is nodig, maar werkt niet...";
});
</script>
Het script zet je bovenin of onderaan de <body> of ergens in de <head>.
Er is geen voorkeur voor een van deze drie benaderingen. Ze zijn alle drie even goed.
Als een pagina in een <frame> of <frame> zit, werkt
het mechanisme niet altijd als je de hele pagina ververst. Het werkt wel als je het frame vernieuwt.
Dit komt doordat dit mechanisme niet werkt op 'parents' van de huidige pagina. Maar als de huidige pagina de focus heeft,
werkt het weer wel!
Opmerking:
Op deze pagina is de eerste mogelijkheid gebruikt. Het script staat in de <head>.
