如何强制加载浏览器全屏[重复]答案

【问题标题】：How to Force On Load Browser Full Screen [duplicate]如何强制加载浏览器全屏[重复]
【发布时间】：2015-05-16 20:14:22
【问题描述】：

我需要在浏览器中打开一个没有任何边框、滚动条、菜单或栏的网页。此脚本似乎在单击时执行此操作。我希望让页面在加载时全屏打开。我已经修改了脚本，但没有运气。

顺便说一句，我不需要取消全屏。我只是发布它以防有人想使用它。

有人可以帮忙吗？

这是点击后的原始代码。

(function () {
    var viewFullScreen = document.getElementById("view-fullscreen");
    if (viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }

    var cancelFullScreen = document.getElementById("cancel-fullscreen");
    if (cancelFullScreen) {
        cancelFullScreen.addEventListener("click", function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }, false);
    }


    var fullscreenState = document.getElementById("fullscreen-state");
    if (fullscreenState) {
        document.addEventListener("fullscreenchange", function () {
            fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not ";
        }, false);
        
        document.addEventListener("msfullscreenchange", function () {
            fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
        }, false);
        
        document.addEventListener("mozfullscreenchange", function () {
            fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
        }, false);
        
        document.addEventListener("webkitfullscreenchange", function () {
            fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
        }, false);
    }

    var marioVideo = document.getElementById("mario-video")
        videoFullscreen = document.getElementById("video-fullscreen");

    if (marioVideo && videoFullscreen) {
        videoFullscreen.addEventListener("click", function (evt) {
            if (marioVideo.requestFullscreen) {
                marioVideo.requestFullscreen();
            }
            else if (marioVideo.msRequestFullscreen) {
                marioVideo.msRequestFullscreen();
            }
            else if (marioVideo.mozRequestFullScreen) {
                marioVideo.mozRequestFullScreen();
            }
            else if (marioVideo.webkitRequestFullScreen) {
                marioVideo.webkitRequestFullScreen();
                /*
                    *Kept here for reference: keyboard support in full screen
                    * marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                */
            }
        }, false);
    }
})();

【问题讨论】：

标签： javascript

【解决方案1】：

目前，答案是您至少不能在 Chrome 中执行此操作，这可能使其无法启动。 Chrome 要求在用户交互事件（单击、鼠标向上等）期间调用 webkitRequestFullscreen。否则你会得到：

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

【讨论】：

【解决方案2】：

我相信大多数 ~90% 的浏览器都会支持：

document.addEventListener("DOMContentLoaded", function(event) { 

});

或者，如果您使用的是 jquery，请调用您在点击时调用的相同函数

$( document ).ready()

【讨论】：