Hướng dẫn dùng Fullscreen API
Bài viết này minh họa cách dùng Fullscreen API để đưa một phần tử cụ thể vào chế độ toàn màn hình, cũng như cách phát hiện khi trình duyệt vào hoặc thoát khỏi chế độ toàn màn hình.
Kích hoạt chế độ toàn màn hình
Với một phần tử bạn muốn trình bày ở chế độ toàn màn hình, chẳng hạn một <video>, bạn có thể đưa nó vào chế độ toàn màn hình bằng cách gọi phương thức requestFullscreen() của nó.
Hãy xét phần tử <video> này:
<video controls id="my-video">
<source src="somevideo.webm" />
<source src="somevideo.mp4" />
</video>
Ta có thể đưa video đó vào chế độ toàn màn hình như sau:
const elem = document.getElementById("my-video");
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
Đoạn mã này kiểm tra sự tồn tại của phương thức requestFullscreen() trước khi gọi nó.
Khi một phần tử ở chế độ toàn màn hình, nó sẽ khớp với :fullscreen, nhờ đó nhận một số kiểu mặc định như chiếm toàn bộ màn hình. Nó cũng được đưa vào top layer.
Nếu có nhiều phần tử được yêu cầu hiển thị ở chế độ toàn màn hình, tất cả chúng đều khớp với :fullscreen và đều nằm trong top layer. Chúng xếp chồng lên nhau, phần tử được yêu cầu gần đây nhất nằm trên các phần tử cũ hơn. Phần tử được yêu cầu gần đây nhất sẽ được hiển thị và được trả về bởi Document.fullscreenElement.
Thông báo
Khi chế độ toàn màn hình được kích hoạt thành công, tài liệu chứa phần tử sẽ nhận một sự kiện fullscreenchange. Khi thoát khỏi chế độ toàn màn hình, tài liệu lại nhận sự kiện fullscreenchange. Lưu ý rằng sự kiện fullscreenchange không tự cung cấp thông tin nào về việc tài liệu đang vào hay ra khỏi chế độ toàn màn hình, nhưng nếu tài liệu có fullscreenElement khác null, thì bạn biết mình đang ở chế độ toàn màn hình.
Khi yêu cầu toàn màn hình thất bại
Không có gì đảm bảo rằng bạn sẽ có thể chuyển sang chế độ toàn màn hình. Ví dụ, các phần tử <iframe> có thuộc tính allowfullscreen để cho phép nội dung bên trong được hiển thị ở chế độ toàn màn hình. Ngoài ra, một số loại nội dung nhất định, như plug-in có cửa sổ riêng, không thể trình bày ở chế độ toàn màn hình. Việc cố gắng đưa một phần tử không thể hiển thị ở chế độ toàn màn hình vào đó, hoặc phần tử cha/con của phần tử như vậy, sẽ không hoạt động. Thay vào đó, phần tử đã yêu cầu toàn màn hình sẽ nhận sự kiện fullscreenerror. Khi yêu cầu toàn màn hình thất bại, Firefox sẽ ghi một thông báo lỗi vào Web Console giải thích lý do thất bại. Tuy nhiên, trong Chrome và các phiên bản Opera mới hơn, sẽ không có cảnh báo như vậy.
Note: Yêu cầu toàn màn hình phải được gọi từ bên trong một bộ xử lý sự kiện, nếu không chúng sẽ bị từ chối.
Thoát khỏi chế độ toàn màn hình
Người dùng luôn có thể tự thoát khỏi chế độ toàn màn hình; xem Những điều người dùng của bạn muốn biết. Bạn cũng có thể làm việc đó bằng chương trình bằng cách gọi phương thức Document.exitFullscreen().
Nếu có nhiều phần tử ở chế độ toàn màn hình, việc gọi exitFullscreen() chỉ thoát phần tử ở trên cùng, để lộ phần tử tiếp theo bên dưới. Nhấn Esc hoặc F11 sẽ thoát tất cả phần tử toàn màn hình.
Thông tin khác
Document cung cấp thêm một số thông tin có thể hữu ích khi phát triển ứng dụng web toàn màn hình:
Document.fullscreenElement/ShadowRoot.fullscreenElement-
Thuộc tính
fullscreenElementcho biếtElementnào hiện đang được hiển thị toàn màn hình. Nếu giá trị khácnull, tài liệu (hoặc shadow DOM) đang ở chế độ toàn màn hình. Nếu giá trị lànull, tài liệu (hoặc shadow DOM) không ở chế độ toàn màn hình. Document.fullscreenEnabled-
Thuộc tính
fullscreenEnabledcho biết liệu tài liệu hiện có ở trạng thái cho phép yêu cầu chế độ toàn màn hình hay không.
Tỷ lệ khung nhìn trong trình duyệt di động
Một số trình duyệt di động khi ở chế độ toàn màn hình sẽ bỏ qua cài đặt thẻ meta viewport và chặn việc phóng to/thu nhỏ của người dùng; ví dụ, cử chỉ "pinch to zoom" có thể không hoạt động trên trang được trình bày ở chế độ toàn màn hình, ngay cả khi trang đó có thể được phóng to/thu nhỏ bằng pinch khi không ở chế độ toàn màn hình.
Những điều người dùng của bạn muốn biết
Bạn nên bảo đảm người dùng biết rằng họ có thể nhấn phím Esc (hoặc F11) để thoát khỏi chế độ toàn màn hình.
Ngoài ra, việc điều hướng sang trang khác, đổi thẻ hoặc chuyển sang ứng dụng khác (ví dụ bằng Alt-Tab) khi ở chế độ toàn màn hình cũng sẽ thoát khỏi chế độ đó.
Ví dụ
Kho GitHub mdn/dom-examples có một ví dụ hoàn chỉnh cho Fullscreen API.