javascript - 通过 javascript 将窗口设置为全屏(真正的全屏；F11 功能)

Question

对此有几个问题，有人说这是不可能的，有人说这在 IE 中是可能的，例如 Internet Explorer full screen mode?我想知道一个通​​用的解决方案和答案。

我正在构建一个照片库网页，当全屏查看时，该库确实会产生不同的效果(正如标题所说，我说的是真正的全屏，而不是带有栏和窗口镶边等)，我想放置一个全屏按钮。 (不，我不会在没有用户意图的情况下强行进行 FS，我也讨厌这种“功能”)在 Flash 中，当通过用户启动的操作(例如按钮单击)启动时，这是可能的，我想知道这样的操作是否可行Javascript 也可用。从逻辑上讲，它应该具有类似于 Flash/SL 用户启动的全屏模式的机制。如果没有适用于所有人的“通用”功能，我可以(总比没有好)部分功能(我的意思是支持某些浏览器，而不是设置窗口宽度/height 等没有提供设置窗口宽度/高度的答案，我知道如何做到这一点，我也不是在寻找它。

Answer 1

现在可以在最新版本的 Chrome、Firefox 和 IE(11) 中实现这一点。

按照 Zuul 在 this thread 上的指示进行操作，我编辑了他的代码以包含 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;
}

“!important”似乎是 IE 渲染它所必需的

Here's an example of it working .

对于任何想要编辑此内容并将其转换为代码片段的人来说，这是一个快速说明，请不要打扰。该代码无法在 SO 代码片段中工作，因为它将其放在 iframe 中。