javascript – 全屏

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​​的元素/文档 ）。 当页面重新加载或浏览到其他页面时，此全屏丢失。
• 用户使用F11设置的另一个原生浏览器 （应用于浏览器本身，而不是页面/文档：如果您重新加载或浏览到其他站点，浏览器将继续以全屏模式运行）。

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

您遇到的问题是因为：

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