如何通过 JavaScript 使用 F11 键事件使浏览器全屏 [英] How to make browser full screen using F11 key event through JavaScript

问题描述

我想让我的浏览器全屏显示.与我们执行 F11 键事件时相同.我发现了一些例子，例如

I want to make my browser full screen. Same as when we do F11 key event. I found some examples such as

function maxwin() {
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript!=null) {
         wscript.SendKeys("{F11}");
    }
}

这不适用于 mozilla 或任何其他最新浏览器.如果有什么办法可以解决这个问题，请告诉我.

Which does not work on mozilla or any other latest browsers. Please let me know if there is any way to sort out this problem.

谢谢.(提前.)

推荐答案

现在可以在最新版本的 Chrome、Firefox 和 IE(11) 中实现.

This is now possible in the latest versions of Chrome, Firefox and IE(11).

按照 Zuul 在 这个线程 上的指示，我编辑了他的代码以包含 IE11 和全屏显示页面上选择的任何元素的选项.

Following the pointers by Zuul on this thread, I edited his code to include IE11 and the option to full screen any element of choice on your page.

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"是您希望的任何元素.

Where "document.body" is any element you so wish.

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

Also note that trying to run these full screen commands from the console do not appear to work on Chrome or IE. I did have success with Firebug in Firefox though.

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

One other thing to note is that these "full screen" commands don't have a vertical scrollbar, you need to specify this within the CSS:

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

!important"似乎是 IE 呈现它所必需的

The "!important" seems to be necessary for IE to render it

这篇关于如何通过 JavaScript 使用 F11 键事件使浏览器全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！