Bản dùng thử theo nguyên gốc mới cho cửa sổ bật lên toàn màn hình

Thomas Steiner

Giả sử bạn muốn mở cửa sổ bật lên ở chế độ toàn màn hình. Cho đến nay, việc mở cửa sổ bật lên toàn màn hình bao gồm hai bước:

  1. Từ cửa sổ ứng dụng chính, hãy gọi phương thức window.open() yêu cầu cử chỉ của người dùng, chẳng hạn như nhấp vào nút Mở cửa sổ bật lên.
  2. Từ cửa sổ bật lên, hãy gọi phương thức Element.requestFullscreen(). Phương thức này cũng yêu cầu cử chỉ của người dùng, chẳng hạn như nhấp vào nút Vào chế độ toàn màn hình.

Hiện đã có bản dùng thử theo nguyên gốc mới chạy trên Chrome 119 (ngày ổn định): Ngày 31 tháng 10 năm 2023 sang Chrome 122 (ngày ổn định): , để mở cửa sổ bật lên ở chế độ toàn màn hình chỉ bằng một bước. Hãy nhấp vào Gia nhập trên trang đích của bản dùng thử theo nguyên gốc Mở cửa sổ bật lên dưới dạng cửa sổ toàn màn hình để đăng ký. Ngoài bản dùng thử theo nguyên gốc, bạn cũng có thể kiểm thử cục bộ bằng cách đặt cờ chrome://flags/#fullscreen-popup-windows thành Enabled (Bật).

Đang mở cửa sổ bật lên toàn màn hình trên màn hình hiện tại

Tính năng mới này chịu sự kiểm soát của quyền window-management. Sau khi người dùng cấp quyền, bạn có thể mở cửa sổ bật lên toàn màn hình như trong ví dụ sau.

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

Trong dòng cuối cùng của mã mẫu, tham số đầu tiên là url sẽ mở trong cửa sổ bật lên. Tham số thứ hai là target, có giá trị đặc biệt là _blank. Tham số thứ ba dành cho windowFeatures, một chuỗi được phân tách bằng dấu phẩy có giá trị popup để mở cửa sổ bật lên và giá trị mới fullscreen để mở cửa sổ bật lên ở chế độ toàn màn hình. Tính năng này chỉ hoạt động với một cử chỉ của người dùng, do đó, có thể kích hoạt chỉ bằng một lần nhấp vào nút.

Mở cửa sổ bật lên toàn màn hình trên các màn hình khác

Tính năng này sẽ thực sự toả sáng khi kết hợp với API Quản lý cửa sổ cho phép bạn lấy thông tin về tất cả màn hình mà người dùng đã kết nối với máy tính của họ. Ví dụ: để mở cửa sổ bật lên toàn màn hình trên một màn hình khác ngoài màn hình hiện tại của người dùng, trước tiên bạn cần tìm màn hình khác rồi truyền các giá trị availLeft, availTop, availWidth và availHeight vào các giá trị left, top, width và height tương ứng của chuỗi windowFeatures.


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

Bản minh hoạ

Hãy thử chạy cửa sổ bật lên toàn màn hình trong bản minh hoạ và xem mã nguồn. Hãy nhớ đánh dấu vào hộp toàn màn hình và nút Cửa sổ bật lên toàn màn hình, đồng thời nếu có cơ hội, hãy chạy bản minh hoạ có nhiều màn hình được đính kèm vào thiết bị của bạn.

Xác nhận

Bài viết này đã được Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman và Rachel Andrew đánh giá.