javascript - 通过javascript将窗口设置为全屏（REAL全屏； F11功能）(Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript)

Question

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?

(关于此有几个问题， 有人说这是不可能的，有人说在IE中是可能的，例如Internet Explorer全屏模式？)

and I'm wondering a universal solution and an answer for this.

(我想知道一个通??用的解决方案和答案。)

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.

(（不，我不会在没有用户意图的情况下强行使用FS，我也讨厌这种“功能”）当通过用户启动的操作（例如按钮单击）启动时，在Flash中是可能的，我想知道是否这样东西也可用于Javascript。)

Logically, it should have a mechanism similar to Flash/SL user initiated fullscreen mode.

(从逻辑上讲，它应该具有类似于Flash / SL用户启动的全屏模式的机制。)

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.

(如果没有适用于所有人的“通用”功能，那么我对部分功能（最好是支持所有浏览器 ，而不是设置窗口宽度/高度等）表示满意（胜于没有）。告诉我设置窗口的宽度/高度，我也知道该怎么做，我也不需要。）)

  ask by Can Poyrazo?lu translate from so

Answer 1

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.

(另请注意，尝试从控制台运行这些全屏命令似乎不适用于Chrome或IE。)

I did have success with Firebug in Firefox though.

(我在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

(“！重要”似乎是IE渲染它所必需的)

Here's an example of it working .

(这是它工作的一个例子 。)