15

我为我的应用程序实现了一个全屏切换功能，它实际上运行良好，在最新的 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 事件。因此，我可以在全屏模式之外抑制事件，但一旦我进入它就不能。

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

4

3 回答 3

12

目前看来是不可能的。

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

那里的一条评论说：

这种全屏窗口模式依赖于操作系统，仅在应用程序级别，并且与我们可怜的网络开发人员可用的任何 API 无关。[...]你不会发现任何跨浏览器/跨操作系统的黑客（我什至不知道我自己的浏览器/操作系统）。获得某些东西的唯一方法是通过 [a] 更强大的 API，让您的应用程序可以访问浏览器的窗口。

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

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

如果您查看此演示页面以获取包装特定于浏览器的实现的库，您可以看到：

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

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

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

那么，我们应该怎么做呢？

由于有 2 个不同的功能，也许可以保留它们：如果用户输入 F11-全屏，他们将知道如何通过再次按下相同的键来退出。如果他们使用您的 UI 控件进入 programmatic-fullscreen，请确保您清楚地知道如何退出。作为开发人员，不能 100% 控制两者可能（可以理解）令人沮丧，但实际上用户可能会很好，因为他们会使用其中一个。

于 2017-06-05T12:06:58.640 回答
3

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

示例代码：

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

或者

JSFiddle 示例

于 2017-06-01T15:47:53.293 回答
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>

于 2020-09-14T16:33:02.137 回答