Phương thức requestFullscreen() của API Fullscreen

Định nghĩa và cách sử dụng

requestFullscreen() Phương thức mở yếu tố bằng chế độ toàn màn hình.

Lưu ý:Hãy sử dụng Phương thức exitFullscreen()Hủy chế độ toàn màn hình.

Mô hình

Ví dụ 1

Hiển thị yếu tố <video> trong chế độ toàn màn hình:

/* Lấy yếu tố cần hiển thị toàn màn hình (ví dụ này là video): */
var elem = document.getElementById("myvideo");
/* Khi thực hiện hàm openFullscreen() sẽ mở video toàn màn hình.
Lưu ý rằng chúng ta phải bao gồm tiền tố của các trình duyệt khác nhau vì chúng vẫn chưa hỗ trợ thuộc tính requestFullscreen */
}
  elem.webkitRequestFullscreen();
    else if (elem.msRequestFullscreen) { /* IE11 */
  }
    elem.msRequestFullscreen();
  /* Đóng toàn màn hình */
    function closeFullscreen() {
  }
}

Thử ngay

Ví dụ 2

Nếu muốn mở toàn màn hình trang HTML, hãy sử dụng document.documentElement thay vì document.getElementById("element").Trong ví dụ này, chúng tôi còn sử dụng một hàm đóng để đóng toàn màn hình:

if (elem.requestFullscreen) {
elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) { /* Safari */
}
  elem.webkitRequestFullscreen();
    else if (elem.msRequestFullscreen) { /* IE11 */
  }
    elem.msRequestFullscreen();
  /* Đóng 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();
  }
}

Thử ngay

Ví dụ 3

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

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

Thử ngay

Cú pháp

HTMLElementObject.requestFullscreen()

Tham số

Không có.

Chi tiết kỹ thuật

Giá trị trả về: Không có giá trị trả về.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ phương pháp này hoàn toàn.

Chú thích:Một số trình duyệt cần tiền tố đặc biệt (xem trong dấu ngoặc):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)