无法在Chrome(打包）应用程序上检测到ESC按钮(全屏显示时）

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

本文关键字：按钮 ESC 检测 显示 应用程序 Chrome 打包 应用 程序上      更新时间：2023-09-26

听起来很简单，但绝对是一场噩梦。我无法察觉逃生按钮被按下了。我需要知道全屏模式是否退出，因为你无法阻止按下退出按钮。javascript被注入到一个HTML中，该HTML在web视图中加载。

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

由于您使用的是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) {});
相关文章：