HTML5全屏API逃生按钮事件

问题描述：

我使用jQuery插件全屏https://github.com/martinaglv/jQuery-FullScreen 我的代码：HTML5全屏API逃生按钮事件

$('#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。

（-1）加入jQuery的事件|| http://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-javascript || http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery || http://stackoverflow.com/questions/9090821/is-there-any-way-in-jquery-cluetip-to-have-the-escape-key-close-a-sticky-tooltip || http://stackoverflow.com/questions/8635463/jquerys-autocomplete-customize-behavior-of-escape-key-press || http://stackoverflow.com/questions/6415299/javascript-execute-onclick-of-esc-key || http://stackoverflow.com/questions/7163493/jquery-datepicker-on-esc-key-event – Joonas 2012-03-08 08:16:02

@洛莱罗它不能在全屏模式下工作。例如$（document）.keyup（function（e）{if（e.keyCode == 27）{alert（'escape'）} // esc \t}）;如果只按“Esc”即可使用，但在取消全屏时不起作用！ – Kuzzy 2012-03-08 08:28:50

http://jsfiddle.net/lollero/mehTv/ – Joonas 2012-03-08 08:41:12

答

决定从评论中挖出这些。

你可以这样做。

_{（的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; 


});

答

我得到了同样的问题，写了另一种解决方案，也许比你更简单，并且不需要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; 
      } 
     } 
    });

+ 1用于建议调整大小事件。我正在尝试keydown。 – Prakash 2013-02-23 15:07:32

用于调整大小事件 – slamborne 2014-05-15 20:08:08

答

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

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

从那里，你可以setInterval和检查isFullscreen每100毫秒或任何，并设置你的元素因此。

答

在页面加载

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逃生按钮事件

相关推荐