设置窗口全屏(真正的全屏;F11功能)

Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript

本文关键字：F11 功能 窗口 设置      更新时间：2023-09-26

对此有几个问题，有些人说这是不可能的，有些人说在IE如Internet Explorer全屏模式下是可能的?我想知道一个通用的解决方案和答案。

我正在建立一个图片库网页，当全屏观看时，图片库真的很不同(正如标题所说，我说的是真正的全屏，而不是酒吧和窗口铬等)，我想放置一个全屏按钮。(不，我不会强迫FS没有用户的意图，我讨厌那种"功能"太)这是可能的在Flash中，当通过一个用户发起的动作，如按钮点击启动，我想知道如果这样的事情是可用于Javascript了。从逻辑上讲，它应该具有类似于Flash/SL用户启动的全屏模式的机制。如果没有适用于所有人的"通用"功能，我对部分功能(我的意思是支持某些浏览器，而不是设置窗口宽度/高度等)也没有问题(我知道如何做到这一点，我不是在寻找它)。

现在可以在最新版本的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中。

No。旧版本的IE (≤6)允许此功能，但此功能被视为安全问题，因此现代浏览器都不允许。

您仍然可以调用window.open(url,'','fullscreen=yes')，它使您到达90%的路径，但结果略有不同:

    IE打开一个只有标题栏和URL栏的窗口。覆盖Windows任务栏。
  • Mozilla还打开一个只有标题栏和URL栏的窗口。但是，新窗口继承打开窗口的维度。如果打开的窗口是最大化的，则打开的新窗口也是最大化的。(未覆盖任务栏)
  • Chrome还打开一个窗口，只有标题栏和URL栏。新窗口继承正在打开的窗口的尺寸，但它是从未打开最大化(即使正在打开的窗口是最大化的)。

这是JavaScript中最接近的。你的另一个选择是在Flash中构建一些东西(啊!)，或者只是让你的"全屏"按钮弹出一个灯箱，上面写着"按F11全屏"，并隐藏window.resize上的灯箱或单击灯箱中的取消按钮。

Edit:一个合适的全屏API(最初由Mozilla提出，后来作为W3C提案发布)已经被Webkit (Safari 5.1+/Chrome 15+)和Firefox(10+)实现。这里有一个简短的历史和用法示例。注意IE10据称将不支持 API。

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

将body元素设置为全屏，和的行为与按F11相同。

F11的相同行为可以通过:

document.documentElement.requestFullScreen();   // on

和

document.cancelFullScreen();  // off

还可以检查我们是否处于全屏模式，我使用这行:

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

这也检测fullScreen是否被F11调用:

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

注意:必须在用户交互事件(onclick, onkeydown等)中调用。

注2:当用户按下F11时，没有"元素";是在全屏设置的，所以检测它的唯一方法是用事件监听器拦截键盘或检查客户端尺寸是否与屏幕尺寸相同**

也

: 

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

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

有一个未知的库可以为你完成所有的工作:

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

Chrome或Firefox不支持通过java脚本实现全屏。然而，你可以设法为MSIE拥有它。但这也不是F11的功能。

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

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

相关文章：