Cannot detect ESC button on Chrome (packaged) app (while fullscreen)

Question

Sounds easy but an absolutely nightmare. I cannot detect the escape button being pressed. I need to know if the fullscreen mode is exited as you cannot block the escape button from being pressed. The javascript is injected to a HTML which loads in a webview.

$(document).keyup(function(e) {
  if (e.keyCode === 27) {
    console.log("esc pressed")
  }
});

This only works when the view is not fullscreen!

Going fullscreen:

$('#fullscreen-button').unbind("click").on('click', function(){
  viewer.setFullscreen();
});

setFullscreen: function() {
  if(!viewer.isFullScreen()) {
    console.log("window fullscreen --> ",viewer.isFullScreen());
    document.body.webkitRequestFullscreen();
    $("#presenter, #slide-container .owl-item").addClass('fullscreen tenTwenty');
    $("#viewer-container, #slide-container").addClass('fullscreen thirteenSix');
    $('.fullscreen').width(screen.width);
    $('.fullscreen').height(screen.height);
    $('#slide-container').trigger('refresh.owl.carousel');
  } else {
    document.webkitCancelFullScreen();
    console.log("window fullscreen --> ",viewer.isFullScreen());
    $('.tenTwenty').width(1024); $('.tenTwenty').height(768);
    $('.thirteenSix').width(1366); $('.thirteenSix').height(768);
    $("#presenter, #viewer-container, #slide-container, #slide-container .owl-item").removeClass('fullscreen tenTwenty thirteenSix');
    $('#slide-container').trigger('refresh.owl.carousel');
  }
},

isFullScreen: function(){
  if ( document.webkitFullscreenElement) {
    return true;
  } else {
    return false;
  }
},

I think is a security restriction. If you can detect the ESC key maybe you can prevent exit fullscreen, so a black hole is in. — Marcos Pérez Gude, May 09 '16 at 14:39
All I need to do is reset the styles after exiting - which I can do with a button click but not escape -_- — Abdul Sadik Yalcin, May 09 '16 at 15:16
I have an idea: maybe when exit of fullscreen, the resize event will fire (I don't know exactly, but you can try). If you listen resize, on resize check if fullscreen is enabled, and if not, reset the styles. — Marcos Pérez Gude, May 09 '16 at 15:23
@MarcosPérezGude good shout but window resize is not being called when pressing escape :( — Abdul Sadik Yalcin, May 09 '16 at 15:34
If you are using jquery you can use this sentence: `$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() { });` — Marcos Pérez Gude, May 09 '16 at 15:48

Marcos Pérez Gude · Accepted Answer · 2016-05-10T09:39:24.430

4

Since you are using jQuery, you can add a listener to check the change of fullscreen state. It doesn't tell you if it's opening or closing the fullscreen, but you can check all states like this:

// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
    if(!viewer.isFullScreen()) {
        // you are out of fullscreen
    } else {
        // you are in fullscreen
    }
});

EDIT:

As we talk in comments, vanilla js fits perfectly:

  document.addEventListener('webkitfullscreenchange', function(e) {});

edited May 10 '16 at 09:39

answered May 09 '16 at 16:07

Marcos Pérez Gude

21,869
4
38
69

None of these approaches work unfortunately. I don't know if you have any knowledge regarding Chrome apps but is not similar to a simple web approach - it's Chrome app - very different, strict, annoying and undocumented. – Abdul Sadik Yalcin May 09 '16 at 16:27
The `webkitfullscreenchange` does not fire?? Try with vanilla `document.addEventListener('webkitfullscreenchange')`. It must work. It's a simple event. However, chrome sucks and google is not making good things last years with this browser. – Marcos Pérez Gude May 09 '16 at 16:31
Please edit your answer with your last comment so I can mark it as correct. I remember testing every single one of the events but none would trigger - must of been putting it in the wrong place. Finally got it firing! Thanks dude. Correct answer is: `document.addEventListener("webkitfullscreenchange", function () {}` – Abdul Sadik Yalcin May 10 '16 at 09:38
Done! You're welcome. Remember upvote please `:)` And thank you! – Marcos Pérez Gude May 10 '16 at 09:39
Done! :p Thanks again :) – Abdul Sadik Yalcin May 10 '16 at 09:40

Cannot detect ESC button on Chrome (packaged) app (while fullscreen)

1 Answers1

EDIT: