3

I'm building a web application, and I need control over toggling full screen mode.

Now I have some code, that allows the user switching modes by clicking on a button:

The Button: 

<BUTTON onclick='toggleFullScreen()' id='fullscreenbutton'>Switch full screen/BUTTON>

The screen switcher:

function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {  
            document.documentElement.requestFullScreen();  
        } else if (document.documentElement.mozRequestFullScreen) {  
            document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullScreen) {  
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
        }
    } else {
        if (document.cancelFullScreen) {  
            document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
            document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
            document.webkitCancelFullScreen();  
        }
    }
}

Event listeners for changing button text when window state changes:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e){setButtonText();});
$(window).on('resize', function(e){setButtonText();});

The method setting button's text depends on the screen status:

function setButtonText(){
    let buttonText = (!window.screenTop && !window.screenY) ? "Switch full screen" : "Switch normal screen";
    $("#fullscreenbutton").text(buttonText);
}

It works more or less. My problem is:

If the user switches full screen mode "manually" by pressing F11, my button cannot cancel it.

How can I cancel full screen mode switched by pressing F11 with JavaScript (or jQuery), or how to disable switching full screen mode by pressing F11?

Saphyra
  • 450
  • 3
  • 15
  • 1
    document.addEventListener("keydown", e => { if(e.key == "F11") e.preventDefault(); }); – Naga Sai A Mar 06 '18 at 20:10
  • 1
    To prevent full screen mode you can try using above script but I think we cant control full screen mode after pressing F11 – Naga Sai A Mar 06 '18 at 20:11
  • Seems like it works (At least in Chrome). Disables switching to fullscreen, but let the user return from fullscreen by f11. Thanks – Saphyra Mar 06 '18 at 20:14
  • I didnt understand last part ,disable full screen mode works in chrome right – Naga Sai A Mar 06 '18 at 20:18
  • I could not switch to fullscreen mode by pressing F11. But i could return to normal screen from full by pressing it. – Saphyra Mar 06 '18 at 20:21
  • Your issue is with the text of the button... You could add a generic message like "Change Screen Mode" and simplify your life, but if you really need to display the msg, then [this may help](https://stackoverflow.com/questions/21765389/html5-fullscreen-event-listener) – DIEGO CARRASCAL Mar 06 '18 at 20:54
  • Changing the text of the button works well. The main problem was the effect of the button did not cancelled full screen mode, even the user manually switched it by F11 – Saphyra Mar 07 '18 at 10:06

0 Answers0