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

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

• 一个 applied to elements/documents 您使用 JavaScript(您与 API 一起使用的那个)触发。当页面重新加载或浏览到其他页面时，全屏会丢失。
• 浏览器的另一个 native ，由用户使用 F11 设置(应用于浏览器本身，而不是页面/文档:如果您重新加载或浏览到不同的站点，浏览器将继续全屏模式)。

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

您遇到的问题是因为:

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