HTML5 全屏 API 转义按钮事件答案

【问题标题】：HTML5 Fullscreen API escape button eventHTML5 全屏 API 转义按钮事件
【发布时间】：2012-03-25 18:04:03
【问题描述】：

我正在使用 jQuery 全屏插件https://github.com/martinaglv/jQuery-FullScreen 我的代码：

$('#cancel-fullscreen').hide()                     
//View Fullscreen
$('#view-fullscreen').click(function(){
    $('#container').css({'background': 'green'}).fullScreen();
    $(this).hide();
    $('#cancel-fullscreen').show();
    return false;
});

//Cancel Fullscreen 
$('#cancel-fullscreen').click(function(){
    //I need this work when "Esc" or "F11" buttons pressed                                 
    $('#container').css({'background': 'red'}).fullScreen(); //If press "Esc" background still green..
    $(this).hide();
    $('#view-fullscreen').show();
    return false;
});

效果很好，但我的设计中不需要“取消”按钮，按“Esc”或“F11”按钮可以很好地取消全屏。而且我需要在按下这个按钮后运行一些功能，有什么想法可以做到吗？

谢谢，库兹。

【问题讨论】：

(-1) || stackoverflow.com/questions/3369593/… || stackoverflow.com/questions/1160008/… || stackoverflow.com/questions/9090821/… || stackoverflow.com/questions/8635463/… || stackoverflow.com/questions/6415299/… || stackoverflow.com/questions/7163493/…
@Lollero 它在全屏模式下不起作用。例如 $(document).keyup(function(e) { if (e.keyCode == 27) {alert('escape') } // esc });如果只是按“Esc”可以工作，但在取消全屏时不起作用！
jsfiddle.net/lollero/mehTv
@Lollero 没那么简单 :) 它在 iframe 中运行良好（通过您的链接），但在真实浏览器窗口中无法运行，请尝试使用您的代码 test.xhtml4u.ru/fullscreen/index.html 的实时示例，我认为原因在于HTML5 全屏 API，应该像这样使用： if (document.exitFullscreen) { document.exitFullscreen(); }
你可以这样做：忘记我一直在喋喋不休的 esc 代码，并将退出全屏后要执行的代码插入到这一行 github.com/martinaglv/jQuery-FullScreen/blob/master/fullscreen/… 中，如下所示：jsfiddle.net/lollero/mehTv/1 || jsfiddle.net/lollero/mehTv/1/show

标签： jquery html jquery-plugins fullscreen

【解决方案1】：

决定从 cmets 那里挖出这些。

你可以这样做。

_{（Jsfiddle 已更新，因为我不小心删除了 cmets 中显示的内容）}

http://jsfiddle.net/lollero/sxpam/

http://jsfiddle.net/lollero/sxpam/show/ - 此链接应用于测试实际功能。

//View Fullscreen
$('#view-fullscreen').click(function(){

    $('#container').css({'background': 'green'}).fullScreen({

        'callback'      : function(fullScreen){
            if ( !fullScreen ) {

                // Canceled
                $('#container').css({'background': 'red'});

            }
        }

    });

    $(this).hide();
    return false;


});

【讨论】：

【解决方案2】：

我遇到了同样的问题，写了另一个解决方案，可能比你的更简单，并且不需要使用 jQuery 全屏插件：

var fs_state = "";
var ignore_once = false;

$(window).resize(function(){ //when the browser size change
        //if FS is active
        fs_state = (typeof document.webkitIsFullScreen !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen;
        ignore_once = !ignore_once; //event is called 2 times per fullscreen 
//(don't know why), so i ignore once
        if(ignore_once){
            switch(fs_state){
                case true:
                    //code to execute when open FS
                    break;

                case false:
                    //code to execute when close FS
                    break;
            }
        }
    });

【讨论】：

【解决方案3】：

这是我能想到的检查浏览器是否处于全屏模式的最简单形式

var isFullscreen = ((typeof document.webkitIsFullScreen) !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen;

从那里，您可以setInterval 并每隔 100 毫秒或其他时间检查一次 isFullscreen，并相应地设置您的元素。

【讨论】：

【解决方案4】：

在 pageLoad 上添加 jQuery 事件

jQuery.event.add(window, "resize", FullscrenONOFF);


function FullscrenONOFF()
{
    var checkFullscreen = ((typeof document.webkitIsFullScreen) !== 'undefined') ? document.webkitIsFullScreen : document.mozFullScreen;
    if (checkFullscreen) 
        {
            //code if fullscreen is active                
        } 
   else {
            // code if fullscreen is DeActive
        }

}

【讨论】：