Cross Browser fullscreen mode

Question

In my app, I want users to be able to press a button or F11 to go full screen. However the call to browser to go full screen should go through my custom function as there is additional code which recalculates some variables.

The updated code & link demonstrate that the browser ignores our wrapper function & calls its own fullscreen function immediately with F11 press.

David Walsh has an intro but I cannot seem to be able to pull it off our custom function bit.

The demo works on Chrome but not on Firefox...

David Walsh article on Full screen API

        document.addEventListener('keydown', keyInput, false);
        var fullscreen_flag = false;

        function keyInput(event) {
            event.preventDefault();
            console.log('user press key');
            var code = event.keyCode || event.which;
            if (code === 122) {  // F11 pressed                                               
                requestFullScreen('key request');
            }
        }

        function requestFullScreen(text) {

            if (fullscreen_flag) {                   
                exitFullscreen(text);                    
            }

            else {                   
                triggerFullScreen(text);                    
            }
        }

        function triggerFullScreen(text){
            fullscreen_flag=true;
             //alert('Fullscreen Enabled!');
             console.log(text);
            var elementDom = document.getElementsByTagName('body')[0];
        elementDom.requestFullscreen = elementDom.requestFullscreen ||
        elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
        elementDom.msRequestFullscreen;

        elementDom.requestFullscreen();
        }

        function exitFullscreen(text) {
            console.log(text);
            fullscreen_flag = false;
             //alert('Exiting Fullsreen!');
            document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;

        document.exitFullscreen();

        }

Eltu · Answer 1 · 2014-09-26T10:22:19.240

Now it should work.

<div onclick="exitFullScreen()" style='cursor: pointer'>Exit Full Screen</div>
<div onclick="triggerFullScreen()" style='cursor: pointer'>Enter Full Screen</div>

       document.addEventListener('keydown', keyInput, false);
        var fullscreen_flag = false;
        function keyInput(event) {
            var code = event.keyCode || event.which;
            if (code === 122) {  // F11 pressed                             
                event.preventDefault();
                requestFullScreen();
            }
        }

        function requestFullScreen {                

            if (fullscreen_flag) {                   
                exitFullscreen();
            }

            else {                   
                triggerFullScreen();
                fullscreen_flag = true;
            }
        }

       document.triggerFullScreen=function(){
             alert('Fullscreen Enabled!');
            var elementDom = document.getElementsByTagName('body')[0];
            elementDom.requestFullscreen = elementDom.requestFullscreen ||
            elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
            elementDom.msRequestFullscreen;

            elementDom.requestFullscreen();

        }

        document.exitFullScreen=function() {
             alert('Exiting Fullsreen!');
            document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;

            document.exitFullscreen();

        }

Thanks Kuba, however, it doesnt work for exit mode in Chrome, I'll post the updated jsfiddle code later. — Kayote, Sep 25 '14 at 10:45
Michalek, Ive updated the main question with code & more thorough explanation of what I am trying to solve. Thanks, — Kayote, Sep 26 '14 at 10:09
@Kayote In this case I'm pretty sure you need to use event.preventDefault(); I've edited my code — Eltu, Sep 26 '14 at 10:32
thanks for the suggestion, updated the code but Chrome still doesn't run our function upon exit. — Kayote, Oct 01 '14 at 08:05

Cross Browser fullscreen mode

1 Answers1