01/10/2026 · VietTechies · Biên tập
Các ứng dụng web như bài trình chiếu, bảng điều khiển kiosk, đồng hồ đếm giờ hay trò chơi dạng canvas thường đòi hỏi không gian hiển thị liên tục. JavaScript cung cấp các khả năng trình duyệt tiêu chuẩn thông qua Fullscreen API và Screen Wake Lock API để giúp tạo trải nghiệm hiển thị đắm chìm, đồng thời ngăn thiết bị tự động tắt hoặc khóa màn hình.
Quản lý Vòng đời Toàn màn hình
Fullscreen API cung cấp các phương thức cốt lõi như requestFullscreen dành cho các phần tử, document.exitFullscreen để thoát chế độ toàn màn hình, và thuộc tính document.fullscreenElement dùng kiểm tra trạng thái đang hoạt động. Trong thực tế, việc gọi element.requestFullscreen sẽ trả về một Promise, cho phép các nhà phát triển xử lý các quá trình chuyển đổi một cách bất đồng bộ.
Do các trình duyệt web hiện đại áp dụng chính sách bảo mật chặt chẽ quanh chế độ toàn màn hình, việc kích hoạt phải bắt nguồn trực tiếp từ thao tác của người dùng như nhấp chuột hay nhấn phím. Việc tự động chạy khi tải trang hoặc sau một khoảng trễ bất đồng bộ như phương thức fetch sẽ bị chính sách bảo mật trình duyệt từ chối.
Xử lý Screen Wake Lock và Hạn chế Trình duyệt
Đoạn mã có thể kết hợp trạng thái toàn màn hình với Screen Wake Lock API qua navigator.wakeLock.request('screen') nhằm ngăn hệ điều hành làm tối màn hình trong các tác vụ kéo dài. Chế độ này yêu cầu ngữ cảnh HTTPS an toàn và sẽ tự động hủy kích hoạt bất cứ khi nào người dùng thu nhỏ hoặc chuyển sang thẻ trình duyệt khác.
Tính tương thích giữa các trình duyệt là yếu tố quan trọng khi triển khai tính năng toàn màn hình. Dù các trình duyệt máy tính hiện đại hỗ trợ API tiêu chuẩn, các phiên bản Safari cũ vẫn cần tiền tố nhà cung cấp (vendor prefix). Riêng Safari trên iPhone giới hạn việc hiển thị toàn màn hình ở cấp phần tử cho thẻ video, đòi hỏi giải pháp thay thế bằng lớp phủ CSS cho các phần tử DOM thông thường.
Ảnh minh họa do AI tạo, không phải ảnh tư liệu.
Nguồn:
How to Use the Fullscreen API in JavaScript (and Keep the Screen Awake with the Wake Lock API)