浏览器全屏之requestFullScreen全屏与F11全屏

浏览器全屏有两种方式，一种是使用JavaScript的requestFullScreen API，另一种是使用F11键全屏。

1. requestFullScreen全屏

requestFullScreen是HTML5新增的API，可以实现在浏览器中全屏显示一个元素。该方法可以用于任何元素，例如div、canvas等。

使用方法：

var element = document.documentElement; // 获取html元素
if (element.requestFullScreen) {
    element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
}

2. F11全屏

F11键全屏是浏览器自带的全屏功能，按下F11键可以让浏览器全屏显示当前页面。这种方式只能使用F11键来实现全屏，不能通过JavaScript来控制。

需要注意的是，F11全屏与requestFullScreen全屏的效果是不同的。F11全屏会隐藏浏览器的地址栏、工具栏、标签栏等界面，而requestFullScreen全屏只是将元素全屏，不会隐藏浏览器的其他界面。

相关问题

js 模仿f11 浏览器全屏显示

你可以使用以下代码实现全屏显示：

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // 不在全屏模式下
      !document.mozFullScreenElement && 
      !document.webkitFullscreenElement && 
      !document.msFullscreenElement ) {  // 进入全屏模式
    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();
    }
  }
}

然后在你的页面中添加按钮，并绑定 `toggleFullScreen` 函数即可。

<button onclick="toggleFullScreen()">全屏</button>

js 浏览器全屏与取消全屏方阿飞

您好，关于您的问题，您可以使用以下代码：

全屏：

var el = document.documentElement;
var rfs = 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}");
  }
}

取消全屏：

var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
 
if(typeof cfs != "undefined" && cfs) {
  cfs.call(el);
}
else if(typeof window.ActiveXObject != "undefined") {
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if(wscript != null) {
    wscript.SendKeys("{F11}");
  }
}

这里使用了元素的 requestFullScreen() 和 cancelFullScreen() 方法来进行全屏与取消全屏的操作。如果浏览器不支持这些方法，可以使用 ActiveXObject 对象来模拟 F11 键盘事件实现全屏与取消全屏的效果。