如果用F11触发，全屏API无法正常工作 [英] Fullscreen API not working if triggered with F11

问题描述

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

I implemented a fullscreen toggling feature for my application and it is actually working fine, tested on newest Chrome, Firefox, IE and Opera. I have one method for activating and one for deactivating fullscreen mode:

  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，就不会设置任何标志.我尝试使用以下方法对其进行测试:

So when triggered from UI they both work fine. The only problem is once I enter fullscreen mode using F11 I cannot exit it using the deactivateFullscreen function. As far as I understand it for the browser no flag is set once I hit F11. I tried to test it using the following method:

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

无论我是否处于全屏模式，它始终返回false.还有其他方法可以检测浏览器当前是否处于全屏模式吗?还是我在这里缺少某些概念?

This always returns false, no matter whether I am in fullscreen or not. Is there any other way to detect if I the browser is currently in fullscreen mode? Or am I missing on some concept here?

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

Another thing I tried is to catch the keydown event for F11 and prevent its default action.

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

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

使用这种方法，我希望抑制所有F11事件，以便通过代码手动处理全屏切换.不幸的是，这也不起作用.原因似乎有些奇怪，当我已经处于全屏状态时，根本不会触发keydown事件.因此，我可以在全屏模式之外限制该事件，但一旦输入该事件就不能.

Using this method I expected to supress any F11 events in order to process the fullscreen toggling manually via code. Unfortunately this also does not work. The reason seems a little odd, the keydown-event is simply not triggered while I am already in fullscreen. Hence I can supress the event outside the fullscreen mode but not once I entered it.

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

Update: Some research showed that security concerns of browser vendors are the reason for this behaviour. Still there has to be a way to handle this kind of features.

推荐答案

到目前为止似乎还不可能.

It seems impossible as of now.

请参阅这个问题，它提出的问题完全相同. 但这是一个不断发展的局面，值得不时地重新审视，所以这里是我收集的一些细节.

See this question that was asking exact same thing. But it's an evolving situation that deserves being revisited from time to time, so here are some details I gathered.

有一条评论说:

这种全屏窗口模式取决于操作系统，仅在应用程序级别，并且不依赖于我们可怜的Web开发人员可用的任何API. [...]您将找不到任何跨浏览器/跨OS的黑客工具(对于我自己的浏览器/OS，我什至一无所知).唯一可以得到的方法是通过[a]功能更强大的API，使应用程序可以访问浏览器的窗口.

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在全屏规范中进行了定义，希望它能阐明这个问题.浏览器尚未完全实现它(例如，在Chrome中未实现document.exitFullscreen()，并且document.webkitExitFullscreen()不返回Promise)，但是它提供了运行方向的提示.不幸的是，它没有提到预先存在的全屏浏览器功能(由F11触发的功能)，因此很难说这将如何发展.

The API that allows to programmatically control fullscreen state is defined in fullscreen spec, and I was hoping it would shed light on the issue. Browsers do not fully implement it yet (e.g. document.exitFullscreen() is not implemented in Chrome and document.webkitExitFullscreen() does not return a Promise), but it gives hints about where things are going. Unfortunately it does not mention the pre-existing full-screen browser feature (the one triggered by F11), so it's difficult to say how this would evolve.

就目前而言，全屏F11和程序化全屏是两种不同的事物，尽管它们并不是完全相互隔离的.另外，例如在macOS上，浏览器的全屏"功能完全不同，因为它可以全屏显示，但仍然可以显示地址栏和/或选项卡.

For now, F11-fullscreen and programmatic-fullscreen are 2 different things, although not entirely isolated from one another. Also, on macOS for example, browser's "full screen" feature is completely different, as it does take the whole screen but can still leave address bar and/or tabs shown.

如果您在此演示页面中查看包装了特定于浏览器的实现的库，则可以看到:

If you check this demo page for a library that wraps browser-specific implementations, you can see that:

• 以编程方式将正文或任何元素全屏设置时，浏览器将应用特殊的CSS规则(例如，背景变为黑色).
• 在F11全屏模式下不会发生这种情况
• 在文档(document.documentElement)上以编程方式全屏显示时也不会发生这种情况，因此这是从F11全屏显示中获得的最接近的结果.

• When programmatically setting body or any element fullscreen, the browser applies special CSS rules (e.g. background becomes black).
• This does not happen with F11-fullscreen
• This also does not happen with programmatic fullscreen on document (document.documentElement), so that's the closest you can get from F11-fullscreen.

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

But that does not make F11-FS and programmatic-FS-on-doc-element equivalent:

动画过渡效果有所不同(例如，在Firefox上和文档元素上的程序全屏，实际上有点笨拙，因为预期黑色背景时它会逐渐变黑，但是在全屏元素为文档时却没有黑色背景，如前所述以上)
• 当F11进行全屏显示时，document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement)为false，但当对程序元素进行编程式全屏显示时为true(在Chrome和Firefox和IE11上进行验证)
• F11键可以退出全屏程序化，但是programexitFullscreen无法退出全屏键.这是您遇到的问题.另外，Esc键不能退出F11全屏，但会退出程序全屏.

• animated transitions are different (and actually a bit clunky for example on Firefox and programmatic-fullscreen on document element, as it fades to black in anticipation of black background, but there is no black background when fullscreened element is document, as stated above)
• When F11-fullscreened, document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) is false, but true when programmatic-fullscreen-on-document-element (verified on Chrome & Firefox & IE11)
• F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen.

由于有两种不同的功能，也许可以保留它们:如果用户输入F11-fullscreen，他们将知道如何通过再次按同一键退出.如果他们使用您的UI控件进入全屏编程，请确保您清楚地知道如何退出.作为开发人员不能同时控制两个100％，这可能(令人沮丧)，但是实际上，用户可能会很好，因为他们将使用一个或.

Since there are 2 different features, maybe it's OK to leave them be: if users enter F11-fullscreen, they will know how to exit by just pressing the same key again. If they enter programmatic-fullscreen with your UI controls, make sure you make it as obvious how to exit. It might be (understandably) frustrating as a dev not to be able to control both 100%, but in practice users will probably be fine, as they will use one or the other.

这篇关于如果用F11触发，全屏API无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！