jquery - 如果使用 F11 触发，则全屏 API 不工作

Question

我为我的应用程序实现了一个全屏切换功能，它实际上运行良好，在最新的 Chrome、Firefox、IE 和 Opera 上进行了测试。我有一种激活和停用全屏模式的方法:

  public deactivateFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      document.webkitCancelFullScreen();
    } else if (element.mozRequestFullScreen) {
      document.mozCancelFullScreen();
    }else if(element.msRequestFullscreen){
      document.msExitFullscreen();
    }
  }

  public activateFullscreen(element) {
    if (element.requestFullScreen) {
      element.requestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    }else if(element.msRequestFullscreen){
      element.msRequestFullscreen();
    }
  }

因此，当从 UI 触发时，它们都可以正常工作。唯一的问题是，一旦我使用 F11 进入全屏模式，我就无法使用 deactivateFullscreen 函数退出它。据我了解，一旦我点击 F11，浏览器就不会设置任何标志。我尝试使用以下方法对其进行测试:

  public isFullscreen(element) {
    if(element.webkitIsFullScreen || element.mozFullscreen || element.msFullscreenElement || element.fullscreenElement || element.fullscreen || element.webkitFullscreenElement || element.mozFullScreenElement){
      return true;
    }
    return false;
  }

这总是返回 false，无论我是否处于全屏模式。有没有其他方法可以检测浏览器当前是否处于全屏模式？还是我在这里遗漏了一些概念？

我尝试的另一件事是捕获 F11 的 keydown 事件并阻止其默认操作。

$document.on('keydown',this.fsHandle);

  public fsHandle(event:KeyboardEvent){
    if(event.keyCode == 122){
      event.preventDefault();
      this._isFullscreen = !this._isFullscreen;
    }
  }

我希望使用此方法抑制任何 F11 事件，以便通过代码手动处理全屏切换。不幸的是，这也行不通。原因似乎有点奇怪，当我已经处于全屏模式时，根本不会触发 keydown 事件。因此，我可以在全屏模式之外抑制事件，但一旦进入全屏模式就不能。

更新:一些研究表明，浏览器供应商的安全问题是造成这种行为的原因。仍然必须有一种方法来处理此类功能。

Answer 1

目前看来是不可能的。

参见 this question那是在问完全相同的事情。但这是一个不断变化的情况，值得不时重新审视，所以这里是我收集的一些细节。

那里的一条评论说:

This fullscreen window mode is OS dependent, only at an app level, and not tied to any API available to us poor web-devs. [...] You won't find any cross-browser/cross-OS hack (I don't even know any for my own browser/OS). The only way you could get something would be through [a] more powerful API, giving you an application access to the browser's window.

允许以编程方式控制全屏状态的 API 在 fullscreen spec 中定义，我希望它能阐明这个问题。浏览器尚未完全实现它(例如 document.exitFullscreen() 未在 Chrome 中实现并且 document.webkitExitFullscreen() 不返回 Promise)，但它给出了有关事情进展的提示。不幸的是，它没有提到预先存在的全屏浏览器功能(由 F11 触发的功能)，因此很难说这将如何发展。

目前，F11-fullscreen 和 programmatic-fullscreen 是两种不同的东西，尽管彼此并不完全隔离。此外，例如在 macOS 上，浏览器的“全屏”功能完全不同，因为它确实占据了整个屏幕，但仍然可以显示地址栏和/或标签。

如果你勾选this demo page对于包装特定于浏览器的实现的库，您可以看到:

• 当以编程方式设置正文或任何元素全屏时，浏览器应用 special CSS rules (例如背景变黑)。
• F11 全屏不会发生这种情况
• 对于文档 (document.documentElement) 的程序化全屏也不会发生这种情况，因此这是您可以从 F11 全屏获得的最接近结果。

但这并不能使 F11-FS 和 programmatic-FS-on-doc-element 等价:

• 动画过渡是不同的(实际上有点笨拙，例如在 Firefox 上和文档元素上的程序化全屏，因为它在黑色背景的预期中逐渐变黑，但是当全屏元素是文档时没有黑色背景，如前所述以上)
• 当 F11-fullscreened 时，document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) 为 false，但在 programmatic-fullscreen 时为 true -on-document-element(在 Chrome & Firefox & IE11 上验证)
• F11键可以退出programmatic-fullscreen，但是programmatic-exitFullscreen不能退出F11-fullscreen。这是你遇到的问题。此外，Esc 键不能退出 F11-全屏，但可以退出编程式全屏。

那么，那我们该怎么办呢？

由于有 2 个不同的功能，也许可以保留它们:如果用户输入 F11-fullscreen，他们将知道如何通过再次按同一个键退出。如果他们使用您的 UI 控件进入程序化全屏，请确保您清楚地表明如何退出。作为开发人员不能 100% 控制两者可能(可以理解)令人沮丧，但实际上用户可能会没事，因为他们将使用一个或另一个。