javascript-全屏

我有这个切换全屏的代码。这是可行的，但也有一些小问题

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

如果启用全屏模式，在按下F11后，单击全屏按钮将不起作用

---

我如何解决这些问题？

我不知道您是否能够解决这些问题。发生这种情况是因为有两种不同的全屏模式：

• 使用JavaScript触发的一个（与API一起使用的一个）。重新加载页面或浏览到其他页面时，此全屏将丢失
• 由用户使用F11设置的浏览器的另一个本地版本（应用于浏览器本身，而不是页面/文档：如果重新加载或浏览到其他站点，浏览器将以全屏模式继续）

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

您面临的问题是因为：

• 问题1：
  • 。当您使用API进入全屏模式时，您正在设置该标志，但当您刷新页面时，该标志将变为其原始值（unset），全屏将丢失。与重新加载页面时重置任何其他JavaScript变量的方式相同
  • 如果将浏览器设置为全屏模式（使用F11），则在退出全屏之前，浏览器将保持这种状态，与浏览位置无关，甚至与关闭浏览器无关。您正在设置浏览器的首选项
• 问题2：
  • 事实上，这不是一个问题，因为它的工作原理与预期相符。问题是，您将在全屏（窗口）中全屏（元素）（全屏异常！：P）。因此，您看不到任何明显的变化，但当设置

    全屏

    标志时，确实发生了变化。你可以从中看出区别。他添加了CSS，因此当打开

    ：全屏
    时，页面将变为红色。按F11键，注意背景不会变成红色，现在单击“全屏/取消全屏”按钮查看背景颜色的变化

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();
    }
}