Window Management API

Khái niệm và cách sử dụng

Trước đây, chúng ta đã sử dụng Window.open() để quản lý các cửa sổ trình duyệt liên quan đến ứng dụng hiện tại, bao gồm mở cửa sổ mới, thay đổi kích thước và đóng cửa sổ hiện có, v.v. Ví dụ, để mở cửa sổ 400×300 cách cạnh trái và trên của màn hình 50 pixel:

const myWindow = window.open(
  "https://example.com/",
  "myWindow",
  "left=50,top=50,width=400,height=300",
);

Bạn có thể lấy thông tin về màn hình của mình từ thuộc tính Window.screen, chẳng hạn như không gian màn hình có sẵn để đặt cửa sổ.

Tuy nhiên, các tính năng trên còn hạn chế. Window.screen chỉ trả về dữ liệu về màn hình chính, không bao gồm màn hình phụ có thể có trên thiết bị. Để di chuyển cửa sổ sang màn hình phụ, bạn có thể dùng Window.moveTo(), nhưng bạn phải đoán tọa độ dựa trên vị trí của nó tương đối với màn hình chính trong thiết lập của bạn.

Window Management API cung cấp khả năng quản lý cửa sổ mạnh mẽ và linh hoạt hơn. Nó cho phép bạn truy vấn xem màn hình có được mở rộng với nhiều màn hình hay không và lấy thông tin về từng màn hình riêng biệt: các cửa sổ có thể được đặt trên từng màn hình theo ý muốn. Nó cũng cung cấp trình xử lý sự kiện để phản hồi các thay đổi trên màn hình có sẵn, chức năng toàn màn hình mới để chọn màn hình nào sẽ chuyển sang chế độ toàn màn hình (nếu có) và chức năng quyền để kiểm soát quyền truy cập API.

Để biết chi tiết cách sử dụng, xem Sử dụng Window Management API.

Trường hợp sử dụng

Window Management API hữu ích trong các trường hợp như:

• Trình chỉnh sửa đồ họa và bộ xử lý âm thanh đa cửa sổ, có thể muốn sắp xếp các công cụ chỉnh sửa và bảng điều khiển trên các màn hình khác nhau.
• Bàn giao dịch ảo muốn hiển thị xu hướng thị trường trong nhiều cửa sổ và đặt các cửa sổ cụ thể vào chế độ toàn màn hình.
• Ứng dụng trình chiếu muốn hiển thị ghi chú diễn giả trên màn hình chính bên trong và bài thuyết trình trên máy chiếu bên ngoài.

Tích hợp Permissions Policy

window-management Permissions-Policy có thể được sử dụng để kiểm soát quyền sử dụng Window Management API. Cụ thể:

• Việc sử dụng phương thức Window.getScreenDetails(). Nếu bị chặn, Promise của nó sẽ từ chối với ngoại lệ NotAllowedError.
• Truy vấn thuộc tính Window.screen.isExtended. Nếu bị chặn, nó sẽ luôn trả về false.

Các nhà phát triển có thể cấp quyền rõ ràng cho <iframe> sử dụng Window Management thông qua thuộc tính allow:

<iframe src="3rd-party.example" allow="window-management"></iframe>

Giao diện

ScreenDetails Secure context

Đại diện cho thông tin chi tiết của tất cả màn hình có sẵn cho thiết bị của người dùng.

ScreenDetailed Secure context

Đại diện cho thông tin chi tiết về một màn hình cụ thể có sẵn cho thiết bị của người dùng.

Mở rộng sang các giao diện khác

Sự kiện Screen change Secure context

Kích hoạt trên một màn hình cụ thể khi màn hình đó thay đổi theo một cách nào đó, ví dụ như chiều rộng hoặc chiều cao khả dụng, hoặc hướng màn hình.

Screen.isExtended Secure context

Thuộc tính boolean trả về true nếu thiết bị của người dùng có nhiều màn hình, và false nếu không.

Element.requestFullscreen(), tùy chọn screen

Chỉ định màn hình nào bạn muốn đặt phần tử vào chế độ toàn màn hình.

Window.getScreenDetails() Secure context

Trả về một Promise thực hiện với một phiên bản đối tượng ScreenDetails.

Ví dụ

Bạn có thể tìm thấy các ví dụ đầy đủ tại đây:

• Môi trường học đa cửa sổ cơ bản (xem mã nguồn).
• Trò chơi Platformer đa cửa sổ (xem mã nguồn).
• Demo đặt cửa sổ (xem mã nguồn).

Thông số kỹ thuật

Tương thích trình duyệt