为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

HUX布斯 2019-11-15 12:43:19

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


我正在建立一个照相馆网页,当全屏观看时,该照相馆确实有所作为(正如标题所述,我所说的是真正的全屏,而不是带有条形和窗口镀铬等),我想放置一个按钮全屏显示。(不,我不会在没有用户意图的情况下强行使用FS,我也讨厌这种“功能”)当通过用户启动的操作(例如单击按钮)启动时,在Flash中是可能的,我想知道是否这样东西也可用于Javascript。从逻辑上讲,它应该具有类似于Flash / SL用户启动的全屏模式的机制。如果没有适用于所有人的“通用”功能,我会设置窗口的宽度/高度等。也没有附带告诉您设置窗口的宽度/高度的答案,我知道该怎么做,我也没有在寻找它)。


查看完整描述

3 回答

?
qq_笑_17

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

}

“!重要”似乎是IE渲染它所必需的


查看完整回答
反对 回复 2019-11-15
?
ITMISS

您仍然可以致电 window.open(url,'','fullscreen=yes'),获得90%的付款方式,但结果略有不同:


IE将打开一个仅包含标题栏和URL栏的窗口。该窗口的大小适合整个屏幕,并覆盖Windows任务栏。

Mozilla还会打开一个仅包含标题栏和URL栏的窗口。但是,新窗口继承了打开窗口的尺寸。如果打开的窗口最大化,则新窗口将最大化打开。(未涵盖任务栏。)

Chrome浏览器还会打开一个仅包含标题栏和URL栏的窗口。新窗口继承了打开窗口的尺寸,但是永远不会最大化打开(即使打开窗口已最大化)。

这与使用JavaScript所获得的效果非常接近。 您的另一种选择是在Flash中构建内容(或者!),或者只是让您的“全屏”按钮弹出一个灯箱,上面写着“按F11进入全屏”,然后隐藏灯箱,window.resize或者在灯箱中单击取消按钮。


编辑: Webkit(Safari 5.1 + / Chrome 15+)和Firefox(10+)已实现了适当的全屏API (最初由Mozilla提出,后来作为W3C提议发布)。 这里是简要的历史和用法示例。 请注意,据称IE10将不支持该API。


查看完整回答
反对 回复 2019-11-15
?
翻阅古今

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


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


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


document.documentElement.webkitRequestFullScreen();   // on


document.webkitCancelFullScreen();  // off

还检查我们是否处于全屏模式,我使用以下行:


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

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


查看完整回答
反对 回复 2019-11-15

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信