Cách thực hiện chế độ toàn màn hình

Học cách sử dụng JavaScript để tạo cửa sổ toàn màn hình.

Cửa sổ toàn màn hình

Cách sử dụng JavaScript để xem phần tử trong chế độ toàn màn hình.

Nhấn nút để mở video trong chế độ toàn màn hình:

Thử trực tiếp

Video toàn màn hình

Để mở phần tử trong chế độ toàn màn hình, chúng ta sử dụng element.requestFullscreen() Phương pháp:

Mẫu

<script>
/* Lấy phần tử cần hiển thị trong chế độ toàn màn hình (ví dụ: video): */
var elem = document.getElementById("myvideo");
/* Khi thực hiện hàm openFullscreen() thì mở video trong chế độ toàn màn hình. */
Lưu ý, chúng ta phải bao gồm tiền tố cho các trình duyệt khác nhau vì chúng chưa hỗ trợ phương thức requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Thử trực tiếp

Tài liệu toàn màn hình

Để mở toàn màn hình trang web, hãy sử dụng document.documentElement thay thế document.getElementById("element")。

Trong ví dụ này, chúng ta cũng sử dụng một hàm đóng để thoát chế độ toàn màn hình:

Mẫu

<script>
/* Lấy documentElement (<html>) để hiển thị trang toàn màn hình */
var elem = document.documentElement;
/* Xem toàn màn hình */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Thoát khỏi chế độ toàn màn hình */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Khi trang đang ở chế độ toàn màn hình, bạn còn có thể sử dụng CSS để thiết lập kiểu trang:

Mẫu

/* Safari */
-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
-ms-fullscreen {
  background-color: yellow;
}
/* Cú pháp tiêu chuẩn */
:fullscreen {
  background-color: yellow;
}

Thử trực tiếp

Trang liên quan

Hướng dẫn tham khảo HTML DOM:Phương thức requestFullscreen()

Hướng dẫn tham khảo HTML DOM:Phương thức exitFullscreen()

Hướng dẫn tham khảo HTML DOM:Phương thức documentElement