Question

我正在网上考试网站上做一个项目。当候选人点击参加考试时，我想制作标题栏，最小化浏览器的按钮和窗口任务栏。有谁知道怎么做？

Answer 1

这适用于Firefox，谷歌浏览器，Safari，Opera和IE 11 +。

以下代码使用全屏API实现。它还使用用户交互切换全屏。您还可以检测全屏的当前状态。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script language="javascript" type="text/javascript">

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

document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "on" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "on" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "on" : "not ";
}, false);

document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement)? "on" : "not ";
}, false);
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="toggleFullScreen();">
Open in Full Screen Window</a>
<p>Fullscreen state: I'm <b id="fullscreenState"> not </b> fullscreen</p>
</body>
</html>

当您使用此在线检查时，请按照以下步骤进行操作

默认状态为“没有全屏”＆＃39;
将页面设置为全屏后，使用此状态开始跟踪用户与浏览器全屏的交互。如果用户恢复正常，则丢弃用户将考试/制作作为不当行为等。
您所要做的就是检查request_access是否全屏。

参考： - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

如何在javascript中制作标题栏，最小化按钮并最大化网页上不可见的按钮？

1 个答案: