logo标签列表

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

javascriptbrowserscreenfullscreenkeyevent
11

我想让我的浏览器全屏显示，就像使用F11按键事件一样。我找到了一些例子，例如

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

这种方法在Mozilla或其他最新的浏览器上不起作用。请让我知道是否有任何解决此问题的方法。

谢谢。（提前致谢。）

4个回答
13

最新版本的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的渲染是必要的

我已经尝试了其他解决方案。这个最佳答案，百分之百有效。 - dns
请注意，requestFullScreen中的大写字母S已经被弃用（但可能仍在Firefox中存在），应该改为小写s，即requestFullscreen。我花了一些时间才弄清楚这个问题。 - TrySpace
12

使用此代码而不是原来的代码

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

来源：如何在JavaScript中创建全屏窗口（覆盖整个屏幕）

已在Chrome、Firefox 10及以上版本、IE 8及以上版本、Safari 5中测试并可用。

谢谢！我正在运行一个Blazor应用程序，这段代码片段可以直接使用。干得好。 - James Heffer
@Treby：如果我们想要退出，那么代码应该是什么？ - Ahsan Khurshid
请注意，requestFullScreen中的大写字母S已经被弃用（但可能仍在Firefox中使用），应该改为小写s，即requestFullscreen。我花了一些时间才弄清楚这个问题。 - TrySpace
6

如果没有原生代码或浏览器扩展程序是不可能的。ActiveXObject仅存在于IE浏览器中。

我想知道自2011年9月21日以来有多少变化？Facebook现在（2012年4月9日）具有使其弹出窗口全屏的功能（至少在Chrome中肯定如此），而我仍然肯定使用浏览器（而不是flash），因为我可以“检查元素”并执行其他Chrome操作。 - JayC
非常正确：正如@Treby所指出的，现在出现了全屏API，因此这可能不再有效。 - Femi
请注意，全屏API和F11并不是同一件事情。[https://bugzilla.mozilla.org/show_bug.cgi?id=794468] - Tgr
这个答案现在已经过时了 - 请查看本帖中使用全屏API的其他答案。 - Maximillian Laumeister
-3

现在的时代，至少在 Safari 5 和 Chrome 16 的 WebKit 浏览器中，可以通过以下方式实现：

 webkitEnterFullscreen()

Firefox 10也可以使用。点击此链接进行检查

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接