Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture
I want to make my HTML5 game go native fullscreen on launch. When I do this with a button onclick, it goes fullscreen. But when I use window.onload to make it go fullscreen onload, it replys on the console Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture. I am using chrome. Is there a workaround this?
My code:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = openfullscreen();
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function openfullscreen() {
launchIntoFullscreen(document.documentElement);
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
window.close();
}
function fix() {
var screenwidth = screen.width;
var screenhei = screen.height;
document.getElementById('ifam').width = screenwidth;
document.getElementById('ifam').height = screenhei;
}
</script>
<style>
#ifam {
position:fixed;
left:0%;
top:0%;
z-index:-1;
}
#fullscreen {
position:fixed;
left:0%;
top:0%;
z-index:1;
}
</style>
</head>
<body onload="fix()">
<div id="fullscreen">
<button onclick="openfullscreen()">Open</button>
<button onclick="exitFullscreen()">Exit</button>
</div>
<iframe id="ifam" src="lchosser.html"></iframe>
</body>
</html>
Answer
Any javascript api is intentionally made this way I guess. Just imagine if you go to a website and it automatically turns on in fullscreen without you doing anything at all. You would be exposed to a whole world of annoying popups and other stuff you dint even intend to open. So any such script requires user interaction to work. Switching to fullsreen without user interaction quite very much feels like malicious intent. Example if a site such as this opened up in fullscreen : Virtual Desktop someone may pretty much be confused of what just happened to their desktop.
If you still want to try a partial workaround maybe then take a look at following answer :