How to change to Fullscreen the entire webpage with confirm()?
11,011
Firsty, your conditions are different between 2 samples. Right code is:
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
Secondly and importantly, you can't make fullscreen your page without a user interaction. This is a security restriction. If you trigger code above by a user click, it'll be work. For example:
document.onclick = function (argument) {
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
}
If you click anywhere on the page, fullscreen mode will be activated. More detail: https://stackoverflow.com/a/20533579/198062
Author by
Matt Smith
Updated on June 04, 2022Comments
-
Matt Smith almost 2 years
I want that when click in "OK" in the confirm box the entire webpage go to fullscreen, but with this only get error
TypeError: docelem.requestFullscreen is not a function
. I tried of all but nothing...var conf = confirm("Fullscreen mode?"); var docelem = document.documentElement; if (conf == true) { docelem.requestFullscreen(); } else if (conf == true) { docelem.mozRequestFullScreen(); } else if (conf == true) { docelem.webkitRequestFullScreen(); } else if (conf == true) { docelem.msRequestFullscreen(); }
Some solution? or is it not possible with confirm()? Because with a button works:
(function () { var fullscreenon = document.getElementById("fullscreenbutton");//button Id if (fullscreenon) { fullscreenon.addEventListener("click", function () { var docelem = document.documentElement; if (docelem.requestFullscreen) { docelem.requestFullscreen(); } else if (docelem.msRequestFullscreen) { docelem.msRequestFullscreen(); } else if (docelem.mozRequestFullScreen) { docelem.mozRequestFullScreen(); } else if (docelem.webkitRequestFullScreen) { docelem.webkitRequestFullScreen(); } }, false); } })();
-
Matt Smith over 9 yearsthe button "OK" of confirm() box isn't user interaction?? only is user interaction if is a element that is in html, like body, button, etc... Really?
-
Murat Çorlu over 9 yearsYes, I think.. :) Maybe you can use "mousemove" event of body element as an "user interaction".
-
Dominik George almost 8 yearsThe definition of „user interaction“ in MDN at developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API is that requestFullscreen() can only be run from within an event handler.