Question

全屏web API允许全屏元素对象。但是可以使用“Esc”键禁用全屏。当按下“Esc”键时，我尝试使用事件阻止默认方法。即使这样，全屏也被禁用。我希望我的网页以全屏模式运行，因为它是在线考试应用程序，我不希望用户退出全屏并打开新标签页和其他应用程序。

以下是代码示例：

function openAppInFullScreen() {
  let
    rootEl = window.document.documentElement,
    rfs = rootEl.requestFullScreen 
          || rootEl.msRequestFullscreen 
          || rootEl.webkitRequestFullScreen 
          || rootEl.mozRequestFullScreen;
  rfs.call(rootEl);
}

function disableOutofAppActions(event) {
  let
    isF5orF11key = (event.keyCode === 116 || event.keyCode === 122),
    isCtrlKeyOrEsc = event.ctrlKey || (event.keyCode === 27);


  if (isF5orF11key || isCtrlKeyOrEsc) {
    /* Block the event */
    event.preventDefault()
    /*Show an warning alert*/
  }
}

window.addEventListener("click", openAppInFullScreen);
window.addEventListener("keydown", disableOutofAppActions)

Answer 1

我正在使用Visibility API处理这种情况，它允许我们检测当前浏览器选项卡是处于活动状态还是未聚焦状态。因此，如果用户没有查看我们的应用程序或尝试打开其他应用程序，则可以触发事件。有关此结帐的更多信息，请回答此问题。 https://stackoverflow.com/a/1060034/6610070

jQuery的模糊方法至少对我来说也起作用了。请注意，为简洁起见，我没有添加事件回调函数的代码。

$(window).onblur(alertOutOfAppAction)
$(window).onfocus(removeOutOfAppActionAlert)

强制网页以全屏模式运行

1 个答案: