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 specifies只能在当前或下降的浏览器上下文中运行。

更改或刷新页面时，浏览器上下文会更改，全屏效果会丢失。

MDN also reinforces：

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

更换页面或刷新时丢失全屏

1 个答案: