Force webpage to run in full screen mode

Question

Full screen web API's allow to full screen element object. But full screen can be disabled using "Esc" key. I tried using event prevent Default method when "Esc" key is pressed. Even then full screen is disabled. I want my webpage to run in full screen mode, since it is online exam application, I don't want users to exit full screen and open new tabs and other applications.

Here is sample of code:

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)

Add a time limit. If this would be possible, you could literally trap your users — Bálint, Dec 06 '16 at 10:59
even if you do this (which I'm pretty sure you can't, it's the user's choice how to position their window), they can just use alt-tab (or whatever the shortcut is on their OS) to move between windows anyway. Or press the Super (Windows) key to summon the OS menu. If this app will be run only on known machines in controlled circumstances, consider installing a kiosk-style OS on the machines to restrict access to other apps/services. — ADyson, Dec 06 '16 at 10:59
You need to solve this with browser configuration, not with a web app. — Quentin, Dec 06 '16 at 11:03

score 0 · Answer 1 · edited May 23 '17 at 12:13

I'm handling this kind of situations using Visibility API which allows us to detect if the current browser tab is active or unfocused. Hence if user is not viewing our application or trying to open other applications the event can be fired. For more info about this checkout this answer. https://stackoverflow.com/a/1060034/6610070

Also jQuery's blur method did work at least for me. Note for brevity I didn't add the code of event callback functions.

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

Force webpage to run in full screen mode

1 Answers1