如何通过JavaScript使用F11键事件使浏览器全屏[重复]答案

【问题标题】：How to make browser full screen using F11 key event through JavaScript [duplicate]如何通过JavaScript使用F11键事件使浏览器全屏[重复]
【发布时间】：2011-09-21 06:22:26
【问题描述】：

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

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

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

谢谢。（提前。）

【问题讨论】：

标签： javascript browser screen fullscreen keyevent

【解决方案1】：

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

按照 Zuul 在 this thread 上的指示，我编辑了他的代码以包含 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 渲染它所必需的

【讨论】：

我尝试了其他解决方案。这个最佳答案，100% 有效。
注意requestFullScreen中的大写S afaik已被弃用（但可能仍在Firefox中），应该有一个小的s； requestFullscreen。我花了一段时间才弄明白

【解决方案2】：

改用此代码

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}");
  }
}

来源：How to make in Javascript full screen windows (stretching all over the screen)

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

【讨论】：

谢谢！我正在运行一个 blazor 应用程序，这个代码 sn-p 可以正常工作。拍摄布鲁。
@Treby：如果我们想退出，代码是什么？？
注意requestFullScreen中的大写S afaik已被弃用（但可能仍在Firefox中），应该有一个小的s； requestFullscreen。我花了一段时间才弄明白

【解决方案3】：

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

【讨论】：

我想知道自 2011 年 9 月 21 日以来发生了多大的变化？ Facebook 现在（2012 年 4 月 9 日）具有使其弹出框全屏显示的功能（至少在 Chrome 中是这样），而且我仍然可以肯定地使用浏览器（而不是 flash），因为我可以“检查元素”并执行其他 Chrome 操作..
非常正确：正如@Treby 指出的那样，现在出现了全屏 API，因此这可能不再有效。
请注意，全屏 API 和 F11 是 [bugzilla.mozilla.org/show_bug.cgi?id=794468](not 相同的东西）。
此答案现已过时 - 请参阅此线程中的其他答案以了解使用全屏 API 的解决方案。

【解决方案4】：

现在可以使用

 webkitEnterFullscreen()

Firefox 10 也可以。 check this link

不知道 i-e 在这个主题中做了什么

【讨论】：