Javascript 通过javascript将窗口设置为全屏（真正的全屏；F11功能）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7179535/
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
Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
提问by Can Poyrazo?lu
There are several questions about this, some say it's not possible, some say it ISpossible in IE such as Internet Explorer full screen mode?and I'm wondering a universal solution and an answer for this.
关于这个有几个问题，有人说不可能，有人说在IE浏览器全屏模式下可以吗？我想知道一个通用的解决方案和一个答案。
I'm building a photo gallery webpage, and the gallery really makes out a difference when viewed fullscreen (as the title says, I am talking about truefullscreen, not with bars and window chrome etc), and I would like to place a button for fullscreen. (no, I won't be going forcefully FS without user's intention, I hate that kind of "functionality" too) It IS possible in Flash when initiated through a user-initiated action such as button click, and I was wondering if such a thing is available for Javascript too. Logically, it should have a mechanism similar to Flash/SL user initiated fullscreen mode. If there's no "universal" functionality that will work for all, I'm ok (better than nothing) for partial functionality (I mean supporting SOME of the browsersby that, NOT setting window width/heightetc. don't come with answer telling to set window width/height, I know how to do it, I'm NOT looking for it) too.
我正在构建一个照片库网页，当全屏查看时，该库确实有所不同（正如标题所说，我说的是真正的全屏，而不是条形和窗口镀铬等），我想放置一个按钮为全屏。（不，我不会在没有用户意图的情况下强行使用 FS，我也讨厌这种“功能”）当通过用户启动的操作（例如按钮单击）启动时，在 Flash 中是可能的，我想知道是否这样东西也可用于 Javascript。从逻辑上讲，它应该具有类似于 Flash/SL 用户启动的全屏模式的机制。如果没有适用于所有人的“通用”功能，我设置窗口宽度/高度等不要回答告诉设置窗口宽度/高度，我知道怎么做，我不是在寻找它）太。
回答by Jamie Barker
This is now possible in the latest versions of Chrome, Firefox and IE(11).
这现在可以在最新版本的 Chrome、Firefox 和 IE(11) 中实现。
Following the pointers by Zuul on this thread, I edited his code to include IE11 and the option to full screen any element of choice on your page.
按照 Zuul 在此线程上的指示，我编辑了他的代码以包含 IE11 和全屏显示页面上任何选择元素的选项。
JS:
JS：
function toggleFullScreen(elem) {
// ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
HTML:
HTML：
<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">
Where "document.body" is any element you so wish.
其中“document.body”是您希望的任何元素。
Also note that trying to run these full screen commands from the console do not appear to work on Chrome or IE. I did have success with Firebug in Firefox though.
另请注意，尝试从控制台运行这些全屏命令似乎不适用于 Chrome 或 IE。不过，我确实在 Firefox 中使用 Firebug 取得了成功。
One other thing to note is that these "full screen" commands don't have a vertical scrollbar, you need to specify this within the CSS:
需要注意的另一件事是这些“全屏”命令没有垂直滚动条，您需要在 CSS 中指定：
*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
overflow: auto !important;
}
The "!important" seems to be necessary for IE to render it
"!important" 似乎是 IE 渲染它所必需的
回答by josh3736
No.Older versions of IE (≤6)allowed it, but this functionality is seen as a security problem, so no modern browser allows it.
否。旧版本的 IE (≤6)允许它，但此功能被视为安全问题，因此现代浏览器都不允许它。
You can still callwindow.open(url,'','fullscreen=yes'), which gets you 90% of the way there, but has slightly different results:
您仍然可以调用window.open(url,'','fullscreen=yes')，它可以让您完成 90% 的工作，但结果略有不同：
- IE opens a window with only titlebar and URL bar. The window is sized to fill the entire screen, and covers the Windows taskbar.
- Mozilla also opens a window with only titlebar and URL bar. However, the new window inherits the opening window's dimensions. If the opening window is maximized, the new window is opened maximized. (The taskbar is not covered.)
- Chrome also opens a window with only titlebar and URL bar. The new window inherits the opening window's dimensions, but it is never opened maximized(even if the opening window is maximized).
- IE 打开一个只有标题栏和 URL 栏的窗口。窗口的大小可以填满整个屏幕，并覆盖 Windows 任务栏。
- Mozilla 还会打开一个只有标题栏和 URL 栏的窗口。但是，新窗口继承了打开窗口的尺寸。如果打开窗口被最大化，则新窗口被最大化打开。（任务栏没有被覆盖。）
- Chrome 还会打开一个只有标题栏和 URL 栏的窗口。新窗口继承了打开窗口的尺寸，但它永远不会最大化打开（即使打开窗口已最大化）。
This is as close as you'll get with JavaScript.Your other option would be to build something in Flash (ugh!), or just have your "fullscreen" button pop up a lightbox that says "Press F11 to go fullscreen", and hide the lightbox on window.resizeor clicking a cancel button in the lightbox.
这与您使用 JavaScript 所得到的一样接近。你的另一个选择是在 Flash 中构建一些东西（呃！），或者只是让你的“全屏”按钮弹出一个灯箱，上面写着“按 F11 进入全屏”，然后隐藏灯箱window.resize或点击灯箱中的取消按钮.
Edit:A proper fullscreen API(first proposed by Mozillaand later released as a W3C proposal) has been implemented by Webkit (Safari 5.1+/Chrome 15+) and Firefox (10+). A brief history and usage examples here.Note that IE10 will allegedly notsupport the API.
编辑：Webkit (Safari 5.1+/Chrome 15+) 和 Firefox (10+) 已经实现了一个适当的全屏 API（首先由 Mozilla 提出，后来作为W3C 提案发布）。 这里有一个简短的历史和使用示例。请注意，IE10 据称不支持该 API。
回答by Zibri
I wonder why nobody noticed that all answers are wrong.
Setting the body element to full screen does nothave the same behaviour of pressing F11.
我想知道为什么没有人注意到所有答案都是错误的。
设置body元素，以全屏幕并不会有按F11的相同的行为。
The same behaviour of F11 can be obtained by:
可以通过以下方式获得 F11 的相同行为：
document.documentElement.requestFullScreen(); // on
and
和
document.cancelFullScreen(); // off
also to check if we are in full screen mode I use this line:
还要检查我们是否处于全屏模式，我使用以下行：
isFullScreen=()=>!(document.currentFullScreenElement==null)
this also detects if fullScreen was invoked by F11:
这也检测F11是否调用了fullScreen：
isFullScreen=(document.documentElement.clientWidth==screen.width && document.documentElement.clientHeight==screen.height)
Note: this must be called from within a user interaction event (onclick, onkeydown, etc).
注意： 这必须在用户交互事件（onclick、onkeydown 等）中调用。
Note 2: when the user presses F11 no "element" is really set in full screen so the only way to detect that is to intercept the keyboard with an eventlistener or to check if the client dimensions are the same of the screen dimensions**
注意 2：当用户按下 F11 时，没有真正在全屏中设置“元素”，因此检测它的唯一方法是使用事件侦听器拦截键盘或检查客户端尺寸是否与屏幕尺寸相同**
回答by Daniel Pereira
You can do this with a signed java applet that has permission to run an automation script to issue the keystroke to go into fullscreen mode. But, this is a total hack that wouldn't be very practical unless your users don't mind your site manipulating their machines.
您可以使用已签名的 Java 小程序执行此操作，该小程序有权运行自动化脚本以发出按键以进入全屏模式。但是，除非您的用户不介意您的站点操纵他们的机器，否则这完全是一种不切实际的黑客行为。
回答by Lluís Marfany
There's an unknown library that makes all the work for you:
有一个未知的库可以为您完成所有工作：
https://github.com/rafrex/fscreen
https://github.com/rafrex/fscreen
I had the same issue and I did (for instance in a react component):
我有同样的问题，我做了（例如在反应组件中）：
import fscreen from 'fscreen';
.....
if (fscreen.fullscreenElement == null) {
fscreen.requestFullscreen(document.documentElement);
}else{
fscreen.exitFullscreen();
}
Works in Chrome, Firefox, Safari, IE11, iOS, Android
适用于 Chrome、Firefox、Safari、IE11、iOS、Android
回答by Anuj Verma
Full screen support through java script is not implemented for Chrome or Firefox. However you can manage to have it for MSIE. But that is also not F11 kind of functionality.
Chrome 或 Firefox 没有通过 java 脚本实现全屏支持。但是，您可以设法将其用于 MSIE。但这也不是 F11 的功能。
Even chrome.exe -kioskdoes not open page in fullscreen mode.
甚至chrome.exe -kiosk不以全屏模式打开页面。
Reason is that it is not recommended to force user and open your application in fullscreen mode. If this is not all the popups from different websites will open in fullscreen mode and you will endup closing all those.
原因是不建议强制用户以全屏模式打开您的应用程序。如果这不是来自不同网站的所有弹出窗口将以全屏模式打开，您最终将关闭所有这些。
