Question

有几个问题，有人说这是不可能的，有些人说它可能在IE中{/ 3}}，我想知道一个通用的解决方案和答案

我正在建立一个照片库网页，当全屏查看时，画廊确实有所不同（正如标题所说，我说的是真正的全屏，而不是酒吧和窗口铬等），我想放一个全屏按钮。（不，我不会强迫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)">

where＆＃34; document.body＆＃34;是你想要的任何元素。

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

另外需要注意的是，这些＆＃34;全屏＆＃34;命令没有垂直滚动条，您需要在CSS中指定：

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

＆＃34;！important＆＃34;似乎是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上隐藏灯箱或点击灯箱中的取消按钮。

修改：Webkit已经实施了fullscreen API（第一个proposed by Mozilla，后来作为W3C proposal发布）{Safari 5.1 + / Chrome 15+ ）和Firefox（10+）。 A brief history and usage examples here.请注意，IE10将据称不支持API。

Answer 3

我想知道为什么没人注意到所有答案都是错误的。

将body元素设置为全屏显示 not 的行为与按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也无法以全屏模式打开页面。

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

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

6 个答案: