Javascript 以全屏模式运行网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29281986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run a website in fullscreen mode
提问by Marcio Barroso
I am looking for a trick to put my website in fullscreen mode without human interaction.
我正在寻找一种技巧，让我的网站无需人工交互即可进入全屏模式。
I've found some examples using HTML5's techniques, but all of then needs to be triggered by a human interaction.
我找到了一些使用 HTML5 技术的示例，但所有这些都需要由人工交互触发。
This website will be displayed in a TV ...
该网站将在电视上显示...
I already think in load the website using a SWF file in fullscreen mode, but instead of going to this direction, I would like to stress all possibilities using just the default pattern (html, css and javascript)
我已经考虑在全屏模式下使用 SWF 文件加载网站，但我不想朝这个方向发展，而是想仅使用默认模式（html、css 和 javascript）强调所有可能性
回答by Cerbrus
You can't forcea website to display in fullscreen mode.
您不能强制网站以全屏模式显示。
Imagine the security concerns if that were possible.
Malicious websites could "HiHyman" a less computer literate person's desktop for all kinds of dubious business.
如果可能的话，想象一下安全问题。
恶意网站可以“劫持”一个不太懂电脑的人的桌面，用于各种可疑的业务。
Allof JS fullscreen api's will throw a error like this:"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."If you try to simply call it from your code.
所有的 JS 全屏 api 都会抛出这样的错误："Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."如果你试图从你的代码中简单地调用它。
I'm pretty darn sure Flash is similar, in that it requires user interaction to go fullscreen. Otherwise, we'd have seen our fair share of fullscreen popups that are nearly impossible to close.
我非常确定 Flash 是相似的，因为它需要用户交互才能全屏显示。否则，我们就会看到几乎不可能关闭的全屏弹出窗口。
回答by EvgEnZh
Other answers already describe how you can go fullscreen in a more or less browser-independent way. However, problem of needing user interaction remains.
其他答案已经描述了如何以或多或少独立于浏览器的方式全屏显示。然而，需要用户交互的问题仍然存在。
You cannot force your webpage to display in fullscreen mode for security reasons. User interaction is required for that.
出于安全原因，您不能强制您的网页以全屏模式显示。为此需要用户交互。
Also, browser leaves fullscreen mode whenever user goes to another page, even on the same website, and (s)he will have to perform some "user interaction" on every page to go back into fullscreen mode.
This is the reason why your website has to be a single page if you want it to be fullscreen.
此外，每当用户进入另一个页面时，浏览器都会离开全屏模式，即使是在同一个网站上，并且（她）必须在每个页面上执行一些“用户交互”才能返回全屏模式。
这就是为什么您的网站必须是单页才能全屏显示的原因。
That is what I suggest: Use a single splash page that has a hidden iFrameon it.
这就是我的建议：使用一个带有隐藏 iFrame 的初始页面。
Whenever user clicks anywhere or presses any key, just set this iFrame to be fullscreen and show it. When you receive an event on leaving fullscreen mode, hide iFrame again to show splash.
每当用户点击任何地方或按下任何键时，只需将此 iFrame 设置为全屏并显示它。当您收到退出全屏模式的事件时，再次隐藏 iFrame 以显示启动画面。
Links open in the same frame by default, so you will stay in fullscreen mode until user explicitly leaves it or some links opens in a new tab.
默认情况下，链接在同一框架中打开，因此您将保持全屏模式，直到用户明确离开它或某些链接在新选项卡中打开。
Here is an example that works in Chrome:
(See it in action.Use other answers to make it browser-independent.)
下面是在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>
Note, however, that websites often disallow embedding, e.g. being displayed inside an iframe. The example initially used W3Schools website instead of Python docs, but they set 'X-Frame-Options' header to 'sameorigin' (disallow cross-site embedding) and it stopped working.
但是请注意，网站通常不允许嵌入，例如显示在 iframe 内。该示例最初使用 W3Schools 网站而不是 Python 文档，但他们将“X-Frame-Options”标头设置为“sameorigin”（禁止跨站点嵌入）并且它停止工作。
P.S. I like the idea of simulating full-blown OS in browser, and it's even better in fullscreen! :) Change your OS!
Also, I am not a web developer. Just thought this question would be interesting to investigate.
PS 我喜欢在浏览器中模拟成熟操作系统的想法，而且在全屏模式下效果更好！:)改变你的操作系统！
另外，我不是网络开发人员。只是认为这个问题会很有趣。
回答by Kami
You might be able to use requestFullScreen() methods as described at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.
您或许可以使用https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode 中所述的 requestFullScreen() 方法。
Note : This still requires user input - but avoid usage of flash.
注意：这仍然需要用户输入 - 但要避免使用 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();
This allows the page to activate full screen, and could possibly be activated via page load on a javascript page. However, there is no support for older browsers.
这允许页面激活全屏，并且可能通过javascript页面上的页面加载来激活。但是，不支持旧浏览器。
回答by Nicholas
When I needed to do something similar I used a splash screen. The button to continue into full screen mode requested it as an attribute of a JS pop:
当我需要做类似的事情时，我使用了启动画面。继续进入全屏模式的按钮将其作为 JS pop 的属性请求：
onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"
This is not fullproof, but worked better than any other methods I found. You likely won't be able to do this without user interaction, so using something like a splashscreen allows you to minimize the intrusion to something more commonly accepted.
这不是完全证明，但比我发现的任何其他方法都有效。如果没有用户交互，您可能无法做到这一点，因此使用闪屏之类的东西可以让您最大限度地减少对更普遍接受的东西的干扰。
回答by pigeon
This is not exactly what the OP was looking for, but in my particular situation, I found a combination of kiosk mode and some dynamic styling to work.
这并不完全是 OP 想要的，但在我的特殊情况下，我发现 kiosk 模式和一些动态样式的组合可以工作。
I was looking to start a browser with a particular URL and have it start in full screen mode. The use case is little to no user interaction on a terminal in a manufacturing plant with a status screen. Following power up, it needs to display only the status without interaction (i.e. display none of configuration UI elements unless the user interacts).
我想用特定的 URL 启动浏览器，并让它以全屏模式启动。用例是在带有状态屏幕的制造工厂的终端上几乎没有用户交互。上电后，它只需要显示状态而无需交互（即，除非用户交互，否则不显示任何配置 UI 元素）。
Perhaps, not realistic on a complex site, but my use was a particular "pane" (div in this case) element. To focus on the particular div, I hid the other divs, and set styles accordingly. If there happens to be user interaction to change from and to fullscreen, I (1) use the regular myElement.*requestFullScreen() document.*exitFullscreen() calls, (2) show/hide the other divs, and (3) switch between the classes below:
也许，在复杂的网站上不太现实，但我使用的是一个特定的“窗格”（在这种情况下为 div）元素。为了专注于特定的 div，我隐藏了其他 div，并相应地设置了样式。如果碰巧有用户交互从全屏切换到全屏，我 (1) 使用常规的 myElement.*requestFullScreen() document.*exitFullscreen() 调用，(2) 显示/隐藏其他 div，以及 (3) 切换在以下课程之间：
.right-pane-fullscreen
{
margin-left: 0px;
}
.right-pane-normal
{
margin-left: 225px;
}
Related discussion on how to use kiosk mode in Chrome (be aware that other Chrome processes running prior to launching kiosk mode can prevent this from working) Opening Chrome browser in full window or kiosk mode on windows 7
有关如何在 Chrome 中使用 kiosk 模式的相关讨论（请注意，在启动 kiosk 模式之前运行的其他 Chrome 进程可能会阻止此操作） 在 Windows 7 上以全窗口或 kiosk 模式打开 Chrome 浏览器
