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

Hãy tưởng tượng bạn muốn mở một 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 một cử chỉ của người dùng như nhấp vào nút Open popup window (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 một cử chỉ của người dùng như nhấp vào nút Enter full screen mode (Chuyển sang chế độ toàn màn hình).

Giờ đây, bạn có thể sử dụng một bản dùng thử theo nguyên gốc mới chạy từ Chrome 119 (ngày phát hành phiên bản ổn định): 31 tháng 10 năm 2023 đến Chrome 122 (ngày phát hành phiên bản ổn định): 31 tháng 10 năm 2023 để mở cửa sổ bật lên ở chế độ toàn màn hình chỉ bằng một bước. Nhấp vào Đăng ký trên trang đích dùng thử nguồ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 thử nghiệm 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 Bật.

Mở cửa sổ bật lên ở chế độ toàn màn hình trên màn hình hiện tại

Tính năng mới này được kiểm soát bằng quyền window-management. Sau khi người dùng cấp quyền, bạn có thể mở một 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 để mở trong cửa sổ bật lên. Tham số thứ hai là target, với giá trị đặc biệt là _blank. Tham số thứ ba là 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 đó, bạn có thể kích hoạt tính năng này chỉ bằng một lần nhấp vào nút.

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

Tính năng này thực sự tỏa sáng khi kết hợp với Window Management API (API Quản lý cửa sổ) cho phép bạn thu thập 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 vớ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 của màn hình đó đến 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ử cửa sổ bật lên ở chế độ 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 đánh dấu fullscreen (toàn màn hình) và nút Fullscreen popup (Cửa sổ bật lên ở chế độ toàn màn hình). Nếu có cơ hội, hãy chơi bản minh hoạ có nhiều màn hình được đính kèm vào thiết bị của bạn.

Lời cảm ơn

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