Question

在我的应用中，我希望用户能够按一个按钮或F11全屏显示。然而，对浏览器进行全屏调用应该通过我的自定义函数，因为有额外的代码重新计算一些变量。

更新的代码＆amp;链接演示浏览器忽略我们的包装函数＆amp; F11按下后立即调用自己的全屏功能。

大卫沃尔什有一个介绍，但我似乎无法将它从我们的自定义功能位拉下来。

该演示适用于Chrome，但不适用于Firefox ...

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

        }

Answer 1

现在应该可以了。

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

        }

跨浏览器全屏模式

1 个答案: