javascript - 全屏

Question

if (!document.fullscreenElement
    && !document.mozFullScreenElement
    && !document.webkitFullscreenElement
    && !document.msFullscreenElement) { 

    if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}
else {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

我有用于切换全屏的代码。它有效，但它有一些小问题。

1. 当我点击全屏按钮时，退出刷新全屏模式后，如果我按F11并刷新，则全屏不会退出。

2. 如果启用了全屏模式，按F11后，单击全屏按钮将无效

我如何解决这个问题？

Answer 1

我不知道你是否能解决这些问题。它们之所以发生是因为有两种不同的全屏模式：

• 使用JavaScript（您使用API​​的那个）触发的applied to elements/documents 。当页面重新加载或浏览到其他页面时，此全屏丢失。
• 浏览器的原生，由用户使用F11设置（应用于浏览器本身，而不是页面/文档：如果您重新加载或浏览到其他网站，则浏览器将以全屏模式继续）。

虽然您可以使用JS控制第一个，但您无法控制另一个。从可用性/安全性的角度来看，这是有道理的：您应该能够控制页面内的行为，但不能控制在页面外的行为或用户的偏好。

您遇到的问题是因为：

• 问题1：
  • By default the fullscreen flag is unset。当您使用API​​进入全屏模式时，您正在设置该标志，但是当您刷新页面时，标志将转到其原始值（未设置）并且全屏丢失。与重新加载页面时重置任何其他JavaScript变量的方式相同。
  • 如果您将浏览器设置为全屏模式（使用F11），它将一直保持这种状态，直到您退出全屏，无论您浏览的位置如何，甚至关闭浏览器。您正在设置浏览器的首选项。
• 问题2：
  • 实际上，这不是一个问题，因为它按预期工作。问题是你要在全屏（窗口）内全屏（元素）（ fullscreenception ！：P）。所以你没有看到任何明显的变化，但确实有一个变化，因为设置了fullscreen标志。您可以在demo by Robert Nyman中看到差异。他添加了CSS，因此在:fullscreen时页面会变红。按F11并注意背景如何变为红色，现在单击＆＃34;全屏/取消全屏＆＃34;用于查看背景颜色变化的按钮。