全屏弹出式窗口的新源试用

Thomas Steiner

假设您想在全屏模式下打开一个弹出式窗口。到目前为止，打开全屏弹出式窗口需要完成以下两个步骤：

  1. 从主应用窗口调用需要用户手势（例如点击打开弹出式窗口按钮）的 window.open() 方法。
  2. 从弹出式窗口调用 Element.requestFullscreen() 方法，该方法同样需要用户手势，例如点击进入全屏模式按钮。

现在，我们推出了一项新的源代码试用版，该试用版适用于 Chrome 119（稳定版发布日期：2023 年 10 月 31 日）至 Chrome 122（稳定版发布日期：2023 年 10 月 31 日）之间的版本，可让您只需一步即可在全屏模式下打开弹出式窗口。在以全屏窗口打开弹出式窗口来源试用版着陆页上，点击注册以进行注册。除了源代码试用版之外，您还可以通过将 chrome://flags/#fullscreen-popup-windows 标志设置为 Enabled 在本地进行测试。

在当前屏幕上打开全屏弹出式窗口

此新功能需要 window-management 权限才能使用。用户授予权限后，您可以打开全屏弹出式窗口，如以下示例所示。

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');
});

在代码示例的最后一行中，第一个参数是要在弹出式窗口中打开的 url。第二个参数是 target，其特殊值为 _blank。第三个参数是 windowFeatures，是一个以英文逗号分隔的字符串，值为 popup 用于打开弹出式窗口，值为 fullscreen 用于在全屏模式下打开弹出式窗口。只需一个用户手势即可触发此功能，因此只需点击一下按钮即可启用。

在其他屏幕上打开全屏弹出式窗口

此功能与 Window Management API 搭配使用时效果更佳，可让您获取用户已连接到其计算机的所有屏幕的相关信息。例如，如需在用户当前屏幕以外的其他屏幕上打开全屏弹出式窗口，您需要先查找其他屏幕，然后将其 availLeft、availTop、availWidth 和 availHeight 值传递给 windowFeatures 字符串的相应 left、top、width 和 height 值。


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`);
});

演示

在演示中试用全屏弹出式窗口，并查看源代码。 请务必选中全屏复选框和全屏弹出式窗口按钮，如果有机会，请在设备上连接多个屏幕来试用此演示。

致谢

本文由 Brad Triebwasser、Hakan Isbiliroglu、Mike Wasserman 和 Rachel Andrew 审核。