Событие кнопки выхода из полноэкранного API HTML5

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».И мне нужно запустить какую-то функцию после нажатия этой кнопки, какие-нибудь идеи, как это можно сделать?

Спасибо, Куззи.

Answer 1

Я получил ту же проблему и написал другое решение, возможно, более простое, чем у вас, и не нужно использовать полноэкранный плагин 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 2

решил вычеркнуть это из комментариев.

Вы могли бы сделать это таким образом.

_{(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 3

Вот самая простая форма, которую я могу придумать, чтобы проверить, находится ли браузер в полноэкранном режиме

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

Оттуда вы можете setInterval и проверять isFullscreen каждые 100 миллисекунд или что-то еще и устанавливать свои элементы соответственно.

Answer 4

Добавление события jQuery на pageLoad

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
        }

}