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提出完全相同的问题。但这是一个不断变化的情况值得不时重新审视，所以这里有一些我收集的细节。

有一条评论说：

此全屏窗口模式取决于操作系统，仅适用于应用程序级别，并且与我们糟糕的web-devs可用的任何API无关。 [...]您无法找到任何跨浏览器/跨操作系统的黑客攻击（我甚至不知道我自己的浏览器/操作系统）。获得某些东西的唯一方法是通过[a]更强大的API，为您提供访问浏览器窗口的应用程序。

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

目前， F11-全屏和程序化全屏是两个不同的东西，尽管并非完全相互隔离。此外，在macOS上，例如，浏览器＆＃34;全屏＆＃34;功能完全不同，因为它确实需要整个屏幕，但仍然可以显示地址栏和/或标签。

如果您检查this demo page包含浏览器特定实现的库，您可以看到：

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

但这并不能使F11-FS和programmatic-FS-on-doc-element等效：

动画过渡是不同的（实际上有点笨拙，例如在Firefox和programmatic-fullscreen文档元素上，因为它在预期黑色背景时渐渐变黑，但是当fullscreened元素是文档时没有黑色背景，如上所述以上）
当F11全屏时，document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement)为假，但在programmatic-fullscreen-on-document-element（在Chrome＆amp; Firefox＆amp; IE11上验证）
F11键可退出程序全屏，但programmatic-exitFullscreen无法退出F11全屏。你遇到的问题是哪个。此外，Esc键无法退出F11全屏，但会退出programmatic-fullscreen。

那么，我们该怎么做呢？

由于有两种不同的功能，可以保留它们：如果用户输入F11全屏，他们只需再次按相同的键即可知道如何退出。如果他们使用您的UI控件进入程序化全屏，请确保您明确如何退出。它可能（可以理解）令人沮丧，因为开发人员无法同时控制100％，但实际上用户可能会很好，因为他们会使用一个或另一个。

Answer 2

使用shortcut.js操作按下的键。这很好。

例子代码：

shortcut.add("F11",function() {
    alert("F11 PRESS");
});

或者

JSFiddle Exemple

如果使用F11触发，则全屏API无法正常工作

2 个答案:

那么，我们该怎么做呢？