Question

如何只使用Javascript / JQuery代码进入全屏模式？目标是进入全屏模式，就像在浏览器中按F11一样，然后以编程方式进入。

Answer 1

您可以使用没有jQuery的vanilla JavaScript激活全屏模式。

<!DOCTYPE html>

<html>

<head>
    <title>Full Screen Test</title>
</head>

<body id="body">
    <h1>test</h1>

    <script>
    var elem = document.getElementById("body");

    elem.onclick = function() {
        req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
        req.call(elem);
    }
    </script>
</body>

</html>

有一点需要注意，您只能在用户执行操作（例如点击）时请求全屏模式。没有用户操作^[1]（例如，在页面加载时），您无法请求全屏模式。

这是一个用于切换全屏模式（as obtained from the MDN）的交叉浏览器功能：

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

有关详细信息，请查看MDN page on full screen APIs。

Answer 2

这是一个使浏览器全屏的工作演示

http://johndyer.name/lab/fullscreenapi/

Answer 3

您可以使用免费提供的jquery插件来检查这些 - jquery full screen， Jquery full screen，jquery full screen

Answer 4

新的html5技术 - 全屏API为我们提供了一种以全屏模式呈现网页内容的简便方法。我们即将为您提供有关全屏模式的详细信息。试着想象一下使用这项技术可以获得的所有优势 - 全屏相册，视频甚至游戏。

但在我们描述这项新技术之前，我必须注意到这一点技术是实验性的， 支持所有主要浏览器 。

您可以在此处找到完整的教程： http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

以下是演示文稿： http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Answer 5

如果您需要一个支持IE11（IE8-10）之前的IE版本的插件，请查看jQuery.fullscreen。在IE11之前，IE本身不支持此功能。

Answer 6

如果您需要JQuery来轻松选择元素，那么您可以这样做：

var viewer = $("#parentid .classname .childelement")[0];
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen;
    rFS.call(viewer);

Answer 7

请尝试以下代码

var el = document.documentElement,
  rfs = el.requestFullscreen
    || el.webkitRequestFullScreen
    || el.mozRequestFullScreen
    || el.msRequestFullscreen 
;

rfs.call(el);

Answer 8

这是一个老问题，但也许有人可能需要这个。我一直在寻找一种通过jQuery获取全屏模式的解决方案，而我已经找到了这种解决方案。我强烈推荐Sindre Sorhus的screenfull.js插件。在这里您可以获取文件。

https://github.com/sindresorhus/screenfull.js

页面中还提供了如何选择和演示。

Answer 9

尝试使用window.resizeTo（x，y）方法。

var  w = window.open('','', 'width=100,height=100');

w.resizeTo(w.screen.availHeight, w.screen.availWidth);

 w.focus();

Answer 10

如果有按钮或其他任何内容，我们可以使用此脚本：

<script language="JavaScript">
function fullScreen() {
    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}");
        }
    }

}
// End -->

带按钮。 <a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
一切都很简单但是如何在pageload上加载该脚本。这意味着webform将在页面加载时全屏显示，而不会点击任何内容。

使用jquery获取全屏模式到我的浏览器

10 个答案: