使用 jquery 在我的浏览器中获取全屏模式答案

【问题标题】：Getting fullscreen mode to my browser using jquery使用 jquery 在我的浏览器中获取全屏模式
【发布时间】：2018-12-14 15:17:20
【问题描述】：

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

【问题讨论】：

你可以在这里看到它stackoverflow.com/questions/1125084/…

标签： jquery

【解决方案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。

【讨论】：

有什么理由不使用req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;这样的简短语句来获得支持的功能，而是使用else if吗？
@MaxYari 在将document.documentElement.webkitRequestFullscreen 存储在变量x 中然后使用x() 或x.call() 时，至少Chrome 会抛出“非法调用”异常。

【解决方案2】：

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

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

【讨论】：

@deepthi：你使用的是哪个版本的 mozilla 浏览器？对于Mozilla 16.0.2 版本工作正常...
我只使用 mozilla 16.0.2

【解决方案3】：

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

【讨论】：

我试过这些.. 但它适用于 mozilla，但与实际屏幕相比，屏幕看起来不同
你发现有什么不同，附上截图

【解决方案4】：

如果您需要支持 IE11 (IE8-10) 之前的 IE 版本的插件，请查看jQuery.fullscreen。 IE 直到 IE11 才原生支持此功能。

【讨论】：

【解决方案5】：

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

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

【讨论】：

适用于现代浏览器并且没有值得投票的插件。

【解决方案6】：

请尝试以下代码

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

rfs.call(el);

【讨论】：

您的答案有什么新内容，还是您只是从其他答案中复制了一些内容？
重要部分是document.documentElement 用于请求，只有document 用于退出

【解决方案7】：

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

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

页面中还提供了操作指南和演示。

【讨论】：

【解决方案8】：

尝试使用 window.resizeTo(x,y) 方法。

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

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

 w.focus();

【讨论】：

【解决方案9】：

如果有按钮或其他任何东西，我们可以使用这个脚本：

<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>
一切都很简单但是如何在页面加载时加载该脚本。这意味着网络表单将在页面加载时全屏显示，而无需单击任何内容。

【讨论】：