通过javascript将窗口设置为全屏（REAL全屏； F11功能）

小编典典

通过javascript将窗口设置为全屏（REAL全屏； F11功能）

javascript

关于此有几个问题，有人说这是不可能的，有人说在IE中是可能的，例如InternetExplorer全屏模式？我想知道通用解决方案和答案。

我正在建立一个照相馆网页，当全屏观看时，该照相馆确实有所作为（正如标题所述，我所说的是真正的全屏，而不是带有条形和窗口镀铬等），我想放置一个按钮全屏显示。（不，我不会在没有用户意图的情况下强行使用FS，我也讨厌这种“功能”）当通过用户启动的操作（例如单击按钮）启动时，在Flash中是可能的，我想知道是否这样东西也可用于Javascript。从逻辑上讲，它应该具有类似于Flash/SL用户启动的全屏模式的机制。如果没有适用于所有人的“通用”功能，我会设置窗口的宽度/高度_等。也没有附带告诉您设置窗口的宽度/高度的答案，我知道该怎么做，我也没有在寻找它）。

阅读 450

2020-05-01

共1个答案

小编典典

现在可以在最新版本的Chrome，Firefox和IE（11）中实现。

按照Zuul在该线程上的指针，我编辑了他的代码，以包括IE11和全屏显示您页面上所选元素的选项。

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”是您希望的任何元素。

另请注意，尝试从控制台运行这些全屏命令似乎不适用于Chrome或IE。我在Firefox中使用Firebug确实取得了成功。

需要注意的另一件事是这些“全屏”命令没有垂直滚动条，您需要在CSS中指定此滚动条：

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

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

2020-05-01