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

我不知道你能不能解决这些问题。之所以出现这种情况，是因为有两种不同的全屏模式：

• 使用(与API一起使用的 适用于元素/文件 )触发的适用于元素/文件。当页面重新加载或浏览到其他页面时，此全屏将丢失。
• 是由用户使用F11设置的浏览器的另一个本机(应用于浏览器本身，而不是应用于页/文档:如果重新加载或浏览到不同的站点，浏览器将以全屏模式继续运行)。

虽然可以用JS控制第一个，但不能控制另一个。从可用性/安全性的角度来看，这是有意义的:您应该能够控制页面内的行为，但不能超出页面或用户的首选项。

您所面临的问题之所以发生，是因为：

• 第1期：
  • 标志未设置。当您使用API进入全屏模式时，您将设置该标志，但是当您刷新页面时，标志会转到它的原始值(unset)，然后整个屏幕就会丢失。与在重新加载页面时重置任何其他JavaScript变量的方式相同。
  • 如果您将浏览器设置为全屏模式(使用F11)，它将一直保持这种状态，直到您退出全屏为止，这与您浏览的位置无关，甚至关闭浏览器也是如此。您正在设置浏览器的首选项。

​

• 问题2：
  • 事实上，这不是一个问题，因为它的工作，如预期。问题是，您将在一个全屏(窗口)中使用全屏幕(元素) (fullscreenception！:P)。因此，您不会看到任何明显的更改，但是在设置fullscreen标志时确实会发生更改。您可以在这个罗伯特·尼曼的演示中看到不同之处。他添加了CSS，这样页面在:fullscreen上就会变红。按F11并注意背景如何不会变红，现在单击“全屏/取消全屏”按钮查看背景颜色如何变化。

​