I am trying to develop a simple script that restrains if the user can or cannot leave fullscreen mode, based on password prompt. Its main objective is to avoid visitors of a museum using the interactive device for other purposes other than its primary goal, which is a browser app that teaches some things about the things exposed there, hence why I am trying to write this script in JS.
So I have created a simple code, which basically should listen to the event fullscreenchange and act based on that, but that's where I am facing my biggest problem: it apparently doesn't.
What it does basically is: - Check if fullscreenchange was called; - If it was, see if the user is trying to enter or leave fullscreen mode; - If the user is leaving fullscreen mode, ask them to enter a password; - If the password is incorrect, it should enable fullscreen mode again.
Take a look at what I have for now:
document.addEventListener("fullscreenchange", function() {
fullscreenchange();
});
document.addEventListener("mozfullscreenchange", function() {
fullscreenchange();
});
document.addEventListener("webkitfullscreenchange", function() {
fullscreenchange();
});
document.addEventListener("msfullscreenchange", function() {
fullscreenchange();
});
function fullscreenchange() {
var fullscreen = (window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height);
if(!fullscreen)
{
if(!passwordChecks()){
openFullscreen()
return;
}
}
}
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function passwordChecks(){
var pass = prompt("Enter password to leave fullscreen:");
if(pass == "leave123")
return true;
return false;
}
The script doesn't return any errors on console (using DevTools from Chrome). But it also doesn't work, when you try to leave fullscreen, nothing happens, that's why I mentioned the fullscreenchange event is apparently not working.
Please let me know if there is any error in this code, and what can be done to achieve the final goal. It is simple, I hope, but I really need your help, guys.
Thank you.
