JavaScript onunload dogodki

Dogodek onunload se sproži, ko uporabnik zapušča spletno stran (ob zaprtju zavihka/okna ali navigaciji na drugo stran). Ta dogodek je posebej uporaben za izvedbo čiščenja, shranjevanje stanja ali prikaz pomembnih opozoril pred zapuščanjem strani.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>onunload primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            text-align: center;
        }
        #sporocilo {
            font-size: 18px;
            margin: 20px;
            padding: 15px;
            background-color: #e8f5e9;
            color: black;
            border-radius: 5px;
        }
        .animiran-text {
            animation: pojavi-izgini 2s ease-in-out;
        }
        @keyframes pojavi-izgini {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        .icon {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div id="sporocilo">Demonstracija onload/onunload dogodkov</div>

<script>
    window.onload = function() {
        document.getElementById("sporocilo").textContent = "Stran naložena! ";
        const icon = document.createElement("img");
        icon.src = "/icons/vadnica.svg";
        icon.className = "icon";
        document.getElementById("sporocilo").appendChild(icon);
        
        // Po 3 sekundah spremenimo sporočilo
        setTimeout(() => {
            document.getElementById("sporocilo").textContent = 
                "Poskusi osvežiti iframe ali klikniti gumb Zaženi kodo";
        }, 3000);
    };

    window.onunload = function() {
        // Ustvarimo nov element za prikaz sporočila
        const element = document.createElement("div");
        element.textContent = "Dogodek onunload sprožen! ";
        const icon = document.createElement("img");
        icon.src = "/icons/vadnica.svg";
        icon.className = "icon";
        element.appendChild(icon);
        element.className = "animiran-text";
        document.body.appendChild(element);
    };
</script>
</body>
</html>

REZULTAT