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

Question

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

我正在建立一个照片库网页，当全屏观看时，画廊确实有所不同（正如标题所说，我说的是真正的全屏，而不是酒吧和窗口铬等），我想放置一个按钮全屏。 （不，我不会强迫FS没有用户的意图，我也讨厌那种“功能”）当通过用户启动的动作（例如按钮点击）启动时，它可能在Flash中，我想知道是否这样的东西也适用于Javascript。从逻辑上讲，它应该具有类似于Flash / SL用户启动的全屏模式的机制。如果没有适用于所有人的“通用”功能，我对部分功能感到满意（总比没有好）（我的意思是支持一些浏览器，不设置窗口宽度/高度等等。请不要回答告诉设置窗口宽度/高度，我知道该怎么做，我也不是在寻找它。

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。

Answer 2

没有.Older versions of IE (≤6)允许它，但这个功能被视为一个安全问题，因此没有现代浏览器允许它。

你仍然可以call window.open(url,'','fullscreen=yes')，它可以让你90％的方式，但结果略有不同：

• IE打开一个只有标题栏和URL栏的窗口。窗口大小适合填满整个屏幕，并覆盖Windows任务栏。
• Mozilla还会打开一个只有标题栏和URL栏的窗口。但是，新窗口继承了打开窗口的尺寸。如果打开窗口最大化，则新窗口最大化打开。 （任务栏未被覆盖。）
• Chrome还会打开一个仅包含标题栏和网址栏的窗口。新窗口继承了打开窗口的尺寸，但它从未打开最大化（即使打开窗口最大化）。

这与JavaScript一样接近。 你的另一个选择是在Flash中构建一些东西（呃！），或者只是让你的“全屏”按钮弹出一个灯箱，上面写着“按F11全屏”，然后在window.resize上隐藏灯箱或点击中的取消按钮。灯箱。

---

编辑：一个正确的fullscreen API（第一个proposed by Mozilla，后来发布为W3C proposal）已经由Webkit（Safari 5.1 + / Chrome 15+）和Firefox（10+）实现。 A brief history and usage examples here.请注意，IE10据称不支持API。

Answer 3

我想知道为什么没有人注意到所有答案都是错的。 将主体元素设置为全屏与按F11的行为不同。

F11的相同行为可以通过以下方式获得：

document.documentElement.webkitRequestFullScreen();   // on

和

document.webkitCancelFullScreen();  // off

还要检查我们是否处于全屏模式我使用这一行：

isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null)

注意：必须在用户交互事件（onclick，onkeydown等）中调用此方法。

Answer 4

您可以使用已签名的Java小程序执行此操作，该小程序有权运行自动化脚本以发出按键以进入全屏模式。但是，除非你的用户不介意你的网站操纵他们的机器，否则这是一个不太实用的黑客攻击。

Answer 5

有一个未知的库可以为您完成所有工作：

https://github.com/rafrex/fscreen

我遇到了同样的问题（例如在反应组件中）：

import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

适用于Chrome，Firefox，Safari，IE11，iOS，Android

Answer 6

Chrome或Firefox未实现通过java脚本提供的全屏支持。但是你可以设法让它用于MSIE。但这也不是F11的一种功能。

即使chrome.exe -kiosk也无法在全屏模式下打开页面。

原因是不建议强制用户并以全屏模式打开您的应用程序。如果这不是所有来自不同网站的弹出窗口将以全屏模式打开，您将最终关闭所有这些。