最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to change to Fullscreen the entire webpage with confirm()? - Stack Overflow

programmeradmin3浏览0评论

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);
    }
})();

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);
    }
})();
Share Improve this question edited Sep 29, 2014 at 18:42 Matt Smith asked Sep 22, 2014 at 18:06 Matt SmithMatt Smith 591 gold badge1 silver badge8 bronze badges 1
  • 1 "Because with a button works" -- could you post your working button code as well? That will help pinpoint what you don't understand. – apsillers Commented Sep 22, 2014 at 18:13
Add a ment  | 

1 Answer 1

Reset to default 7

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./a/20533579/198062

发布评论

评论列表(0)

  1. 暂无评论