如何使用confirm(）将整个网页更改为全屏显示

How to change to Fullscreen the entire webpage with confirm()?

本文关键字：显示 网页 confirm 何使用      更新时间：2023-09-26

我希望当点击确认框中的"确定"时，整个网页都会进入全屏，但这样只会得到错误TypeError: docelem.requestFullscreen is not a function。我尝试了所有，但什么都没有。。。

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

一些解决方案？还是confirm（）不可能？因为有一个按钮可以工作：

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

Firsty，两个样本之间的条件不同。正确的代码是：

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

其次，也是重要的一点，如果没有用户交互，就无法使页面全屏。这是一个安全限制。如果你通过用户点击触发上面的代码，它就会工作。例如：

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

如果您单击页面上的任何位置，将激活全屏模式。更多详细信息：https://stackoverflow.com/a/20533579/198062

相关文章：