JS html implementation full screen

First of all, according to the following warning information, it can be seen that the full screen function cannot be realized automatically, and it must be manually

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

So to achieve full screen, you can click a button control, or add a click event to the whole document, and click to achieve full screen manually. Of course, it is also possible to monitor keyboard events, and realize functions similar to F11.

My example here is to realize the full screen of the whole page by listening to the document.click event. You need to realize the full screen of a certain page element, which can be found on the Internet. There are many examples.

window.onclick = document.onclick = function (e) {
    var el = document.documentElement;
    //The el here can be other page elements, so that the full screen of this element, rather than the full screen of the whole page, is realized
    fullScreen(el);
}
function fullScreen(el) {
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||

        el.mozRequestFullScreen || el.msRequestFullScreen;

    if(typeof rfs != "undefined" && rfs) {

        rfs.call(el);

    } else if(typeof window.ActiveXObject != "undefined") {

        //for IE, this is actually a simulation of pressing F11 of the keyboard to make the browser full screen

        var wscript = new ActiveXObject("WScript.Shell");

        if(wscript != null) {

            wscript.SendKeys("{F11}");

        }

    }
}

If you want to realize automatic full screen, but you can't, you must prompt the warning message manually:

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

setTimeout(function() {
    // IE
    if(document.all) {
        document.click();
    }
    // Other browsers
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.dispatchEvent(e);
    }
}, 1000);

Determine whether the current page is full screen.

/*It is better to set the page to no scrolling first (optional)*/
html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}
function checkFull() {
    //Use the API in html5 to determine whether the screen is full (return the current full screen element)
    var FullEl = document.fullscreenElement    ||
        document.msFullscreenElement  ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;

    //If the API in Html5 is not supported, you can use the most primitive judgment method, but you need to remove the scroll bar of the page
    if (FullEl === null) {
        return isFullscreenForNoScroll();
    }

    return true;
}
/**
 * Support full screen of page without scroll bar launched by Fullscreen api or by pressing f11
 * Pages with scroll bars are not supported
 * @returns {boolean}
 */
function isFullscreenForNoScroll(){
    var explorer = window.navigator.userAgent.toLowerCase();
    if(explorer.indexOf('chrome')>0){//webkit
        if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
            console.log("Full screen");
            return true;
        } else {
            console.log("Incomplete screen");
            return false;
        }
    }else{//IE 9+  fireFox
        if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
            console.log("Full screen");
            return true;
        } else {
            console.log("Incomplete screen");
            return false;
        }
    }
}

In full screen mode, pressing ESC or F11 will perform the default operation of the system and exit the full screen. There is no way to avoid this. But we can do our own operation after exiting the full screen.

function afterExitFull () {
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    //If the API supports html5
    if (typeof rfs != "undefined" && rfs) {
        window.onkeydown = document.onkeydown = function (e) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(e && e.keyCode == 122){//Capture F11 keyboard action
                e.preventDefault();  //Can't stop F11 default action
                e.stopPropagation();

                //Listen to full screen events of different browsers and execute corresponding codes
                document.addEventListener("webkitfullscreenchange", function(evt) {//
                    if (document.webkitIsFullScreen) {
                        //Code to execute after full screen
                    }else{
                        //Code executed after exiting full screen
                    }
                }, false);

                document.addEventListener("fullscreenchange", function(evt) {
                    if (document.fullscreen) {
                        //Code executed after full screen
                    }else{
                        //Code to execute after exiting full screen
                    }
                }, false);

                document.addEventListener("mozfullscreenchange", function(evt) {
                    if (document.mozFullScreen) {
                        //Code to execute after full screen
                    }else{
                        //Code to execute after exiting full screen
                    }
                }, false);

                document.addEventListener("msfullscreenchange", function(evt) {
                    if (document.msFullscreenElement) {
                        //Code to execute after full screen
                    }else{
                        //Code to execute after exiting full screen
                    }
                }, false)
            }
        }
    //Otherwise, use the original method
    } else {
        window.onresize = function(e) {
            if (checkFull()) {
                //Code to execute after exiting full screen
            } else {
                //Code to execute after full screen
            }
        };
    }
}

Tags: IE html5 shell Firefox

Posted on Sun, 03 May 2020 15:03:56 -0400 by tefflox