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

Thomas Steiner

假设您想以全屏模式打开一个弹出式窗口。到目前为止，打开全屏弹出式窗口包括两个步骤：

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

现已推出新的源试用 从 Chrome 119（稳定日期）运行： 在以全屏模式打开弹出式窗口源试用着陆页上点击注册进行注册。 除了源试用之外，您还可以将 chrome://flags/#fullscreen-popup-windows 标志设置为已启用，在本地进行测试。

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

这项新功能受 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 的结合使用中尤为突出，利用该 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 审阅。