javascript - 无法检测 Chrome（打包）应用程序上的 ESC 按钮（全屏时）

Question

听起来很简单，但绝对是一场噩梦。我无法检测到正在按下的退出按钮。我需要知道是否退出全屏模式，因为您无法阻止按下退出按钮。javascript 被注入到在 webview 中加载的 HTML。

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

这仅在视图不是全屏时有效！

进入全屏：

$('#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;
  }
},

Answer 1

由于您使用的是 jQuery，因此您可以添加一个侦听器来检查全屏状态的变化。它不会告诉您它是打开还是关闭全屏，但您可以像这样检查所有状态：

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

编辑：

正如我们在评论中所说，vanilla js 非常适合：

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