JavaScript HTML DOM Dogodki: fullscreenchange

Dogodek fullscreenchange nastane, ko se element prikaže v celozaslonskem načinu ali ko se iz tega načina odklopi. V objektu dogodka event.target lahko preverimo, ali je dokument trenutno v celozaslonskem načinu (uporaba document.fullscreenElement).

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>fullscreenchange – praktičen primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            font-family: Arial,sans-serif;
            padding: 20px;
        }
        .box {
            max-width: 760px;
            margin: 30px auto;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
        }
        h2 {
            margin-top: 0;
        }
        button {
            display: block;
            width: 100%;
            max-width: 300px;
            margin: 8px auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #60a5fa;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
        }
        button:hover {
            background: #2563eb;
        }
        .log {
            margin-top: 12px;
            padding: 8px;
            border: 1px solid #e5e7eb;
            max-height: 180px;
            overflow: auto;
            font-family: monospace;
            font-size: 13px;
            background: #fff;
            color: #333333;
        }
        @media screen and (max-width:480px) {
            button {
                font-size:0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Dogodek <code>fullscreenchange</code></h2>
    
        <button id="enterFS">Celozaslonski način</button>
        <button id="exitFS">Zapri celozaslonski način</button>
    
        <div class="log" id="log"></div>
    </div>
    
    <script>
        const logEl = document.getElementById('log');
    
        function log(msg){
            const line = document.createElement('div');
            line.textContent = `${new Date().toLocaleTimeString()} – ${msg}`;
            logEl.appendChild(line);
            logEl.scrollTop = logEl.scrollHeight;
        }
    
        // Gumbi – vstop/izstop iz celozaslonskega načina
        document.getElementById('enterFS').addEventListener('click', () => {
            // requestFullscreen na html (celotna stran)
            document.documentElement.requestFullscreen().catch(err => {
                log('Napaka pri vstopu v fullscreen: ' + err.message);
            });
        });
    
        document.getElementById('exitFS').addEventListener('click', () => {
            document.exitFullscreen().catch(err => {
                log('Napaka pri izstopu iz fullscreen: ' + err.message);
            });
        });
    
        // Poslušalec celozaslonske spremembe
        document.addEventListener('fullscreenchange', (e) => {
            const isFull = !!document.fullscreenElement;
            log(isFull ? 'Vstopili smo v celozaslonski način.' : 'Zapustili smo celozaslonski način.');
            // Dodatno: spremenimo barvo ozadja, da je vizualno jasno
            document.body.style.background = isFull ? '#d1fae5' : '#f9fafb';
        });
    
        // Začetno stanje (ob nalaganju strani)
        log('Stran naložena. Trenutno stanje: ' +
            (document.fullscreenElement ? 'celozaslonski' : 'normalen'));
    </script>
</body>
</html>

REZULTAT