使用jQuery将全屏模式设置为我的浏览器 | 使用jQuery将全屏模式设置为我的浏览器

本文介绍了使用jQuery将全屏模式设置为我的浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

How can I enter full screen mode using just Javascript/JQuery code? The goal is to enter fullscreen mode like when you press F11 in the browser, but then programmatically.

推荐答案

您可以使用不带jQuery的原始JavaScript激活全屏模式.

You can activate full screen mode using vanilla JavaScript without jQuery.

<!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>

需要注意的一件事是，您只能在用户执行某项操作(例如单击)时请求全屏模式.您不能在没有用户操作的情况下请求全屏模式(例如在页面加载时).

One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action (e.g. on page load).

这是跨浏览器功能，用于切换全屏模式( ):

Here is a cross browser function to toggle full screen mode (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页面全屏API .

For more information, check out the MDN page on full screen APIs.

这篇关于使用jQuery将全屏模式设置为我的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！