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

Question

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

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

Answer 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;
}

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

这是一个工作示例。

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

Answer 2

不可以。旧版 IE (≤6) 允许，但此功能被视为安全问题，因此现代浏览器都不允许使用它。

您仍然可以调用 window.open(url,'','fullscreen=yes')，它可以完成 90% 的任务，但结果略有不同：

• IE 打开一个只有标题栏和 URL 栏的窗口。窗口的大小可以填满整个屏幕，并覆盖 Windows 任务栏。
• Mozilla 还会打开一个只有标题栏和 URL 栏的窗口。但是，新窗口继承了打开窗口的尺寸。如果打开的窗口最大化，则新窗口将最大化打开。 （任务栏未被覆盖。）
• Chrome 还会打开一个只有标题栏和 URL 栏的窗口。新窗口继承了打开的窗口的尺寸，但它永远不会最大化打开（即使打开的窗口最大化）。

这与您使用 JavaScript 所能得到的最接近。您的另一个选择是在 Flash 中构建一些东西（呃！），或者只是弹出“全屏”按钮打开一个显示“按 F11 进入全屏”的灯箱，然后通过 window.resize 或单击灯箱中的取消按钮隐藏该灯箱。

---

编辑：正确的全屏API（第一个由 Mozilla 提出，后来作为 W3C 提案）已由 Webkit (Safari 5.1+/Chrome 15+) 实施，火狐浏览器（10+）。 这里有一个简短的历史和使用示例。请注意，IE10 据称不会 支持API。

Answer 3

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

将 body 元素设置为全屏不具有与按 F11 相同的行为。

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

document.documentElement.requestFullScreen();   // on

并且

document.cancelFullScreen();  // off

为了检查我们是否处于全屏模式，我使用此行：

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

这还检测 F11 是否调用了全屏：

isFullScreen=(document.documentElement.clientWidth==screen.width && document.documentElement.clientHeight==screen.height)

注意：
这必须从用户交互事件（onclick、onkeydown 等）中调用。

注意 2：当用户按 F11 时，没有“元素”真正设置为全屏，因此检测该元素的唯一方法是用事件侦听器拦截键盘或检查客户端尺寸是否与屏幕尺寸相同**

另外：

isFullScreen=window.matchMedia('(display-mode: fullscreen)').matches;

Answer 4

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

Answer 5

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

https://github.com/rafrex/fscreen

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

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 也不会以全屏模式打开页面。

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