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

Question

关于这个有几个问题,有人说这是不可能的,有人说在IE浏览器全屏模式下有可能吗？我想知道一个通​​用的解决方案和答案.

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

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渲染它所必需的

这是一个有效的例子.

Answer 2

没有. 旧版本的IE(≤6)允许它,但这个功能被视为一个安全问题,因此没有现代浏览器允许它.

你仍然可以打电话 window.open(url,'','fullscreen=yes'),它可以让你90%的方式,但结果略有不同:

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

这与JavaScript一样接近. 你的另一个选择是用Flash构建一些东西(呃!),或者只是让你的"全屏"按钮弹出一个灯箱,上面写着"按F11全屏",然后隐藏灯箱window.resize或点击灯箱中的取消按钮.

编辑: Webkit(Safari 5.1 +/Chrome 15+)和Firefox(10+)已经实现了一个正确的全屏API (首先由Mozilla提出,后来作为W3C提议发布). 这里简要介绍历史和用法示例. 请注意,IE10据称不支持API.

Answer 3

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

设置body元素，以全屏幕并不会有按F11的相同的行为。

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

document.documentElement.requestFullScreen();   // on

和

document.cancelFullScreen();  // off

还要检查我们是否处于全屏模式，我使用以下行：

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

这也检测F11是否调用了fullScreen：

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

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

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