Thiết lập iframe toàn màn hình (Fullscreen) bằng JavaScript

Cách tiếp cận

Có 2 cách chính làm fullscreen iframe:

1. CSS: Thay đổi class iframe thành width:100vw, height:100vh (đơn giản, không cần quyền)
2. Fullscreen API: element.requestFullscreen() (chuẩn web, cần tương tác user, toàn màn hình thực sự)

Ví dụ: Cách CSS (Đơn giản)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Iframe CSS</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; padding: 20px; margin: 0; }
        .frame { width: 600px; height: 400px; border: 2px solid #ccc; transition: all 0.3s; }
        .fullScreen { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; border: none; }
        button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; margin: 10px; }
        .controls { position: fixed; top: 20px; right: 20px; z-index: 10000; }
    </style>
</head>
<body>
    <h1>Fullscreen Iframe (CSS Method)</h1>
    <iframe class="frame" id="frame" src="https://www.wikipedia.org" title="Wikipedia"></iframe>
    <div class="controls">
        <button id="btnFull">TOÀN MÀN HÌNH (CSS)</button>
        <button id="btnExit" style="display:none">THOÁT</button>
    </div>

    <script>
        const frame = document.getElementById('frame');
        const btnFull = document.getElementById('btnFull');
        const btnExit = document.getElementById('btnExit');

        btnFull.addEventListener('click', () => {
            frame.className = 'fullScreen';
            btnFull.style.display = 'none';
            btnExit.style.display = 'inline-block';
        });

        btnExit.addEventListener('click', () => {
            frame.className = 'frame';
            btnFull.style.display = 'inline-block';
            btnExit.style.display = 'none';
        });

        // ESC để thoát
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && frame.classList.contains('fullScreen')) {
                btnExit.click();
            }
        });
    </script>
</body>
</html>

Ví dụ: Fullscreen API (Chuẩn web)

<button id="fsApiBtn">FULLSCREEN API</button>

<script>
    const fsBtn = document.getElementById('fsApiBtn');
    const frame = document.getElementById('frame');

    fsBtn.addEventListener('click', async () => {
        try {
            // Yêu cầu iframe cho phép fullscreen
            // Cần thuộc tính allowfullscreen trên iframe
            await frame.requestFullscreen();
        } catch (err) {
            console.error('Fullscreen bị từ chối:', err);
        }
    });

    // Lắng nghe thay đổi fullscreen
    document.addEventListener('fullscreenchange', () => {
        console.log('Fullscreen:', document.fullscreenElement ? 'ON' : 'OFF');
    });
</script>

Yêu cầu quan trọng cho Fullscreen API

<iframe 
    src="https://example.com" 
    allowfullscreen 
    allow="fullscreen">
</iframe>

• Thuộc tính allowfullscreen (legacy)
• Policy allow="fullscreen" (modern)
• Phải được trigger bởi user interaction (click)

So sánh