如何通过 JavaScript 使用 F11 键事件使浏览器全屏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7495373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 02:29:41  来源:igfitidea点击:

How to make browser full screen using F11 key event through JavaScript

javascriptbrowserscreenfullscreenkeyevent

提问by Delmond

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

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

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

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.

这不适用于 mozilla 或任何其他最新浏览器。请让我知道是否有任何方法可以解决这个问题。

Thanks. (In advance.)

谢谢。(提前。)

回答by Treby

use this code instead

改用此代码

var el = document.documentElement
, rfs = // for newer Webkit and Firefox
       el.requestFullScreen
    || el.webkitRequestFullScreen
    || el.mozRequestFullScreen
    || el.msRequestFullScreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

Source: How to make in Javascript full screen windows (stretching all over the screen)

来源:如何在 Javascript 中制作全屏窗口(在整个屏幕上拉伸)

Works and tested on Chrome, FF10 above, IE 8 above, Safari 5..

在 Chrome、FF10 以上、IE 8 以上、Safari 5 上工作和测试。

回答by Jamie Barker

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

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

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.

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

JS:

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:

HTML:

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

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

其中“document.body”是您希望的任何元素。

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.

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

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:

需要注意的另一件事是这些“全屏”命令没有垂直滚动条,您需要在 CSS 中指定:

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

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

"!important" 似乎是 IE 渲染它所必需的

回答by Femi

Not possible without native code or a browser extension. The ActiveXObject only exists in the IE browser.

没有本机代码或浏览器扩展是不可能的。ActiveXObject 只存在于 IE 浏览器中。

回答by longi

now a days it is possible (at least webkit browsers at safari 5, chrome 16) with the

现在有可能(至少是 safari 5、chrome 16 的 webkit 浏览器)与

 webkitEnterFullscreen()

Firefox 10 also works. check this link

Firefox 10 也可以使用。检查此链接

no idea what i-e is doing in this topic

不知道 ie 在这个主题中做什么