通过javascript将窗口设置为全屏（REAL全屏; F11功能） [英] Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
问题描述
有几个问题，有人说这是不可能的，有人说它可能在IE中 =https://stackoverflow.com/questions/464332/internet -explorer-full-screen-mode> Internet Explorer全屏模式？我想知道一个通用的解决方案和答案。
There are several questions about this, some say it's not possible, some say it IS possible in IE such as Internet Explorer full screen mode? and I'm wondering a universal solution and an answer for this.
I我正在建立一个照片库网页，当全屏观看时，画廊确实有所不同（正如标题所说，我说的是真正的全屏，而不是酒吧和窗口铬等），而我想放一个全屏按钮。 （不，我不会强迫FS没有用户的意图，我也讨厌那种功能）当通过用户启动的动作（例如按钮点击）启动时，它可能在Flash中，我想知道是否这样的东西也适用于Javascript。从逻辑上讲，它应该具有类似于Flash / SL用户启动的全屏模式的机制。如果没有适用于所有人的通用功能，我对部分功能感到满意（总比没有好）（我的意思是支持某些浏览器，不是设置窗口宽度/ height 等没有答案告诉设置窗口宽度/高度，我知道怎么做，我也不是在寻找它。
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 true fullscreen, 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 browsers by that, NOT setting window width/height etc. don't come with answer telling to set window width/height, I know how to do it, I'm NOT looking for it) too.
推荐答案
现在可以在最新版本的Chrome，Firefox和IE（11）中使用。
This is now possible in the latest versions of Chrome, Firefox and IE(11).
按照指示由Zuul在这个主题上，我编辑了他的代码以包含IE11和全屏选项您页面上的首选元素。
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.
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：
<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">
document.body是您希望的任何元素。
Where "document.body" is any element you so wish.
另请注意，尝试从控制台运行这些全屏命令似乎无法在Chrome或IE上运行。我确实在Firefox中使用Firebug取得了成功。
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.
另外需要注意的是，这些全屏命令没有垂直滚动条，您需要指定这在CSS中：
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:
*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
overflow: auto !important;
}
！important似乎是IE渲染的必要条件
The "!important" seems to be necessary for IE to render it
这篇关于通过javascript将窗口设置为全屏（REAL全屏; F11功能）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
