無法檢測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) {});