我正在寻找一种技巧，让我的网站无需人工交互即可进入全屏模式。
我找到了一些使用 HTML5 技术的示例，但所有这些都需要由人工交互触发。
该网站将在电视上显示...
我已经考虑在全屏模式下使用 SWF 文件加载网站，但我想强调所有可能性，而不是使用默认模式（html、css 和 javascript）
以全屏模式运行网站
IT技术
javascript
html
fullscreen
2021-01-31 02:14:44
5个回答
您不能强制网站以全屏模式显示。
如果可能的话，想象一下安全问题。
恶意网站可以“劫持”一个不太懂电脑的人的桌面，用于各种可疑的业务。
所有的 JS 全屏 api 都会抛出这样的错误：
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."
如果你试图从你的代码中简单地调用它。
我非常确定 Flash 是相似的，因为它需要用户交互才能全屏显示。否则，我们就会看到几乎不可能关闭的全屏弹出窗口。
其他答案已经描述了如何以或多或少独立于浏览器的方式全屏显示。然而，需要用户交互的问题仍然存在。
出于安全原因，您不能强制您的网页以全屏模式显示。为此需要用户交互。
此外，每当用户进入另一个页面时，浏览器都会离开全屏模式，即使是在同一个网站上，并且（她）必须在每个页面上执行一些“用户交互”才能返回全屏模式。
这就是为什么您的网站必须是单页才能全屏显示的原因。
这就是我的建议：使用一个带有隐藏 iFrame 的初始页面。
每当用户点击任何地方或按下任何键时，只需将此 iFrame 设置为全屏并显示它。当您收到退出全屏模式的事件时，再次隐藏 iFrame 以显示启动画面。
默认情况下，链接在同一框架中打开，因此您将保持全屏模式，直到用户明确离开它或某些链接在新选项卡中打开。
下面是在Chrome浏览器的一个例子：
（看到它在行动。使用其他的答案，使之与浏览器无关。）
<html>
<head>
<script language="jscript">
function goFullscreen() {
// Must be called as a result of user interaction to work
mf = document.getElementById("main_frame");
mf.webkitRequestFullscreen();
mf.style.display="";
}
function fullscreenChanged() {
if (document.webkitFullscreenElement == null) {
mf = document.getElementById("main_frame");
mf.style.display="none";
}
}
document.onwebkitfullscreenchange = fullscreenChanged;
document.documentElement.onclick = goFullscreen;
document.onkeydown = goFullscreen;
</script>
</head>
<body style="margin:0">
<H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
<iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>
但是请注意，网站通常不允许嵌入，例如显示在 iframe 内。该示例最初使用 W3Schools 网站而不是 Python 文档，但他们将“X-Frame-Options”标头设置为“sameorigin”（禁止跨站点嵌入）并且它停止工作。
PS 我喜欢在浏览器中模拟成熟操作系统的想法，在全屏模式下效果更好！:)改变你的操作系统！
另外，我不是网络开发人员。只是认为这个问题会很有趣。
您或许可以使用https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode 中所述的 requestFullScreen() 方法。
注意：这仍然需要用户输入 - 但要避免使用 flash。
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
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();
}
}
}
toggleFullScreen();
这允许页面激活全屏，并且可能通过javascript页面上的页面加载来激活。但是，不支持旧浏览器。
当我需要做类似的事情时，我使用了启动画面。继续进入全屏模式的按钮将其作为 JS pop 的属性请求：
onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"
这不是完全证明，但比我发现的任何其他方法都有效。如果没有用户交互，您可能无法做到这一点，因此使用闪屏之类的东西可以让您最大限度地减少对更普遍接受的东西的干扰。
这并不完全是 OP 想要的，但在我的特殊情况下，我发现 kiosk 模式和一些动态样式的组合可以工作。
我想用特定的 URL 启动浏览器，并让它以全屏模式启动。用例是在带有状态屏幕的制造工厂的终端上几乎没有用户交互。上电后，它只需要显示状态而无需交互（即，除非用户交互，否则不显示任何配置 UI 元素）。
也许，在复杂的网站上不太现实，但我使用的是一个特定的“窗格”（在这种情况下为 div）元素。为了专注于特定的 div，我隐藏了其他 div，并相应地设置了样式。如果碰巧有用户交互从全屏切换到全屏，我 (1) 使用常规的 myElement.*requestFullScreen() document.*exitFullscreen() 调用，(2) 显示/隐藏其他 div，以及 (3) 切换在以下课程之间：
.right-pane-fullscreen
{
margin-left: 0px;
}
.right-pane-normal
{
margin-left: 225px;
}
关于如何在 Chrome 中使用 kiosk 模式的相关讨论（请注意，在启动 kiosk 模式之前运行的其他 Chrome 进程可能会阻止此操作） 在 Windows 7 上以全窗口或 kiosk 模式打开 Chrome 浏览器