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

Answer 3

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

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

从那里，你可以setInterval每100毫秒或其他任何地方检查isFullscreen并相应地设置你的元素。

Answer 4

在页面加载

上添加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
        }

}

HTML5全屏API转义按钮事件

4 个答案: