HTML5全屏API转义按钮事件

Question

我正在使用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"按钮全屏取消.按下这个按钮后我需要运行一些功能,任何想法怎么办？

谢谢,Kuzzy.

Answer 1

决定从评论中舀出这些.

你可以这样做.

_{(自从我不小心删除了评论中显示的内容后,Jsfiddle更新了)}

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;


});

Answer 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;
            }
        }
    });