如果使用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.有没有其他方法可以检测浏览器当前是否处于全屏模式？或者我在这里错过了一些概念？

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

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

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

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

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

Answer 1

到目前为止似乎不可能.

看到这个问题完全相同.但这是一个不断变化的情况值得不时重新审视,所以这里有一些我收集的细节.

有一条评论说:

这种全屏窗口模式取决于操作系统,仅在应用程序级别,并不依赖于我们可怜的web-devs可用的任何API.[...]您将找不到任何跨浏览器/跨操作系统的黑客攻击(我甚至不知道我自己的浏览器/操作系统).获得某些东西的唯一方法是通过[a]更强大的API,为您提供访问浏览器窗口的应用程序.

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

目前,F11全屏和程序全屏是两个不同的东西,虽然不完全相互隔离.此外,例如,在macOS上,浏览器的"全屏"功能完全不同,因为它确实需要整个屏幕,但仍然可以显示地址栏和/或标签.

如果您查看此演示页面以查找包含特定于浏览器的实现的库,您可以看到:

• 当以编程方式设置主体或任何元素全屏时,浏览器应用特殊的CSS规则(例如背景变为黑色).
• F11全屏不会发生这种情况
• 对于document(document.documentElement)的程序化全屏幕也不会发生这种情况,因此这是您从F11全屏获得的最接近的.

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

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

那么,我们该怎么做呢？

由于有2种不同的功能,也许可以保留它们:如果用户输入F11全屏,他们只需再次按相同的键即可知道如何退出.如果他们使用您的UI控件进入程序化全屏,请确保您明确如何退出.这可能是(理解)令人沮丧的一个开发不能够控制均为100%,但在实践中可能用户会被罚款,因为他们将使用一个或另一个.

Answer 2

您可以使用display-mode: fullscreen媒体查询来正确捕获全屏 API 更改和 F11。

CSS 版本：

#fullscreen::before {
    content: 'not ';
}

@media (display-mode: fullscreen) {
    #fullscreen::before {
        content: none;
    }
}

<span id='fullscreen'>fullscreen</span>

JavaScript 版本：

const el = document.getElementById('fullscreen')

const query = matchMedia('(display-mode: fullscreen)')
const handler = e => {
    el.innerHTML = (e.matches ? '' : 'not ') + 'fullscreen'
}

handler(query)
query.addListener(handler)

<span id='fullscreen'></span>