Question

我有问题。全屏请求在Firefox中运行良好，但在Chrome中，当我请求并取消全屏时，我无法再次请求它（F11正常工作）。此外，当我重新加载页面时，它取消全屏。

jQuery('.fullScreen').click(function(){ 
   var docElm = document.documentElement;

   if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
   }

   else if (docElm.mozRequestFullScreen) {
      docElm.mozRequestFullScreen();          
   }

   else if (docElm.webkitRequestFullScreen) {
      docElm.webkitRequestFullScreen(); 
}   
      jQuery('.fullScreen').css({'display' : 'none'});
      jQuery('.minimize').css({'display' : 'block'});
   });

最小化：

jQuery('.minimize').click(function(){               

                            if (document.exitFullscreen) {
                            document.exitFullscreen();
                            }

                            else if (document.mozCancelFullScreen) {
                                document.mozCancelFullScreen();
                            }

                            else if (document.webkitCancelFullScreen) {
                                document.webkitCancelFullScreen();
                            }               

                        jQuery('.fullScreen').css({'display' : 'block'});
                        jQuery('.minimize').css({'display' : 'none'});
                });

此外，当我全屏按esc时，它会最小化，但我无法使用我的按钮返回全屏。

Answer 1

好的，所以有几个想法。

首先按下退出按钮时它不起作用的原因。非常简单，因为你的jquery没有被执行。要解决刷新问题，您可以放置一个cookie，说明浏览器是否全屏显示天气，如果是，您可以在页面就绪事件中全屏显示。我想为你提出一个新想法

下面是全屏api的完全复制可粘贴演示

我想强调一个片段

    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
    if (fullScreenApi.isFullScreen()) {
        fsStatus.innerHTML = 'Whoa, you went fullscreen';
    } else {
        fsStatus.innerHTML = 'Back to normal';
    }
}, true);

您可以在此事件中添加代码，以便在用户离开全屏模式时进行处理。并运行你的最小化方法

            <!DOCTYPE html>
            <html>
            <head>
            <title>FullScreen API</title>

            <style>
            body {
                background: #F3F5FA;
            }
            #container {
                width: 600px;
                padding: 30px;
                background: #F8F8F8;
                border: solid 1px #ccc;
                color: #111;
                margin: 20px auto;
                border-radius: 3px;
            }

            #specialstuff {
                background: #33e;
                padding: 20px;
                margin: 20px;
                color: #fff;
            }
            #specialstuff a {
                color: #eee;
            }

            #fsstatus {
                background: #e33;
                color: #111;
            }

            #fsstatus.fullScreenSupported {
                background: #3e3;
            }
            </style>
            </head>
            <body>
            <div id="container">
                <div id="specialstuff">
                    <p>Inside here is special stuff which will go fullscreen</p>
                    <p>As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a>
                    <p>Status: <span id="fsstatus"></span>
                </div>

                <input type="button" value="Go Fullscreen" id="fsbutton" />
                <p>
                </p>
            </div>


            <script>

            (function() {
            var 
                fullScreenApi = { 
                    supportsFullScreen: false,
                    isFullScreen: function() { return false; }, 
                    requestFullScreen: function() {}, 
                    cancelFullScreen: function() {},
                    fullScreenEventName: '',
                    prefix: ''
                },
                browserPrefixes = 'webkit moz o ms khtml'.split(' ');

            // check for native support
            if (typeof document.cancelFullScreen != 'undefined') {
                fullScreenApi.supportsFullScreen = true;
            } else {     
                // check for fullscreen support by vendor prefix
                for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
                    fullScreenApi.prefix = browserPrefixes[i];

                    if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                        fullScreenApi.supportsFullScreen = true;

                        break;
                    }
                }
            }

            // update methods to do something useful
            if (fullScreenApi.supportsFullScreen) {
                fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

                fullScreenApi.isFullScreen = function() {
                    switch (this.prefix) {  
                        case '':
                            return document.fullScreen;
                        case 'webkit':
                            return document.webkitIsFullScreen;
                        default:
                            return document[this.prefix + 'FullScreen'];
                    }
                }
                fullScreenApi.requestFullScreen = function(el) {
                    return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
                }
                fullScreenApi.cancelFullScreen = function(el) {
                    return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
                }       
            }

            // jQuery plugin
            if (typeof jQuery != 'undefined') {
                jQuery.fn.requestFullScreen = function() {

                    return this.each(function() {
                        var el = jQuery(this);
                        if (fullScreenApi.supportsFullScreen) {
                            fullScreenApi.requestFullScreen(el);
                        }
                    });
                };
            }

            // export api
            window.fullScreenApi = fullScreenApi;   
            })();

            </script>

            <script>

            // do something interesting with fullscreen support
            var fsButton = document.getElementById('fsbutton'),
            fsElement = document.getElementById('specialstuff'),
            fsStatus = document.getElementById('fsstatus');


            if (window.fullScreenApi.supportsFullScreen) {
            fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
            fsStatus.className = 'fullScreenSupported';

            // handle button click
            fsButton.addEventListener('click', function() {
                window.fullScreenApi.requestFullScreen(fsElement);
            }, true);

            fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
                if (fullScreenApi.isFullScreen()) {
                    fsStatus.innerHTML = 'Whoa, you went fullscreen';
                } else {
                    fsStatus.innerHTML = 'Back to normal';
                }
            }, true);

            } else {
            fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
            }

            </script>

            </body>
            </html>

下面我有你的jquery的更新版本

jQuery('.fullScreen').click(function(){ 
    maximize();
});

jQuery('.minimize').click(function(){               
    minimize();
});





function maximize(){
    var docElm = document.documentElement;

    if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
    }

    else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();          
    }

    else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen(); 
    }   
    jQuery('.fullScreen').css({'display' : 'none'});
    jQuery('.minimize').css({'display' : 'block'});
}

function minimize(){
    if (document.exitFullscreen) {
    document.exitFullscreen();
    }

    else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
    }

    else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
    }               

    jQuery('.fullScreen').css({'display' : 'block'});
    jQuery('.minimize').css({'display' : 'none'});
}

重要说明

FullScreenChanged事件 - W3C和Webkit在全屏幕元素上触发fullscreenchanged事件，但Mozilla会在文档对象上触发事件。

无法再次请求全屏Chrome

1 个答案: