更改页面或刷新时失去全屏

Question

在我的网络应用程序中，我有一个按钮允许用户在全屏模式下工作。我的问题是，它仅适用于当前页面，如果我们单击链接或以任何其他方式更改页面，或者即使我们刷新当前页面，全屏模式也会丢失。

这是我用来允许全屏的功能：

// Handle full screen mode toggle
var handleFullScreenMode = function () {
  // toggle full screen
  function toggleFullScreen() {
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
  }

  $('#trigger_fullscreen').click(function () {
    toggleFullScreen();
  });
}

$(document).ready(function () {
  handleFullScreenMode();
});

无论如何，在更改页面时是否可以保留它，就像单击 F11 时发生的情况一样？

Answer 1

不幸的是没有。

API指定全屏仅在当前或降序浏览器上下文中运行。

当页面更改或刷新时，浏览器上下文会发生变化，并且全屏效果会丢失。

MDN 还强化了：

...在全屏模式下导航到另一个页面、更改选项卡或切换到另一个应用程序（例如使用 Alt-Tab）也会退出全屏模式。