在Chrome / Firefox中全屏按下转义时，不会触发Keydown事件 [英] Keydown event not fired when pressing escape in fullscreen in Chrome/Firefox
问题描述
我有这个网站，这是我的下一个投资组合网站：
http：// lantosistvan .com / temp / viewport-images /
I have this website, which is my next portfolio site: http://lantosistvan.com/temp/viewport-images/
在右下角，我有一个锚标记，它触发了下一个javascript：
On the bottom right corner, I have an anchor tag, which is triggering the next javascript:
$(".expand").on("click", function() {
$(document).toggleFullScreen();
$("#header-container, #footer-container").toggleClass('toggle-display');
$("header, footer").toggleClass('toggle-height');
$("a.expand").toggleClass('toggle-bottom');
});
$(window).on("keydown", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 27, 122) {
$("#header-container, #footer-container").removeClass('toggle-display');
$("header, footer").removeClass('toggle-height');
$("a.expand").removeClass('toggle-bottom')
}
});
第一个代码将触发Klaus Reimer的jquery.fullscreen 1.1.4.js： https://github.com/kayahr/jquery-fullscreen-plugin
The first code will trigger "jquery.fullscreen 1.1.4" .js by Klaus Reimer: https://github.com/kayahr/jquery-fullscreen-plugin
下一行将在csstoggle-display中添加一个类，它隐藏了＃header-container和＃footer-container。 Toggle-height为标题和页脚（30px）提供了新的高度，toggle-bottom将为按钮提供新的右下边距。
And the next line will add a class in css "toggle-display" which is hide the "#header-container" and "#footer-container". "Toggle-height" gives new height for the "header" and "footer" (30px), and "toggle-bottom" will give new right and bottom margin for the button.
如果我使用按钮切换，这效果很好。但是，如果某人使用ESC（在Firefox中）或ESC和F11（在Chrome中）按钮，该网站将从全屏退出，但注入的CSS更改仍然保持不变。这将破坏整个体验。
This works great, if I toggle with the button. However, if someone using the ESC (in Firefox) or ESC and F11 (in Chrome) buttons, the site escaping from Full Screen, but the injected CSS changes remain untouched. This will break the whole experience.
所以当有人按ESC或F11时，我创建了第二个代码组，我删除了这些类。
So I made the second code group, where I remove the classes, when someone press ESC or F11.
问题：
- 在Firefox中，F11效果很好！它正在删除类，因此，
垂直图像高度javascript也保持图像高度和
宽高比没有问题。 - 但是如果按ESC键，它从全屏中逃脱，但不删除
类。您需要再次按ESC或F11，才能运行代码。但是
THAN，jquery.fullscreen仍然运行（因为没有关闭
调用）。如果你第二次按相同的键，图像垂直
简单不适合视口UNTIL你以某种方式对
浏览器视口大小进行了更改（例如：进入窗口模式并且
更改了浏览器尺寸）。 - Chrome也遇到同样的问题，但由于Chrome也使用F11进入全屏
全屏，因此问题也会出现。
如果单击右下方按钮，按ESC键，再按一下按钮，功能就会打开。现在它将进入全屏，就像按F11一样。如果有人用F11进入全屏并且他可以看到整个网站，我没有问题。我不想限制我的用户选项。 F11不受影响对我有好处。
If you click on the bottom right button, press ESC and than press the button again, the function turned. Now it will enter to fullscreen, just like if you press F11. I don't have problem if someone enter to fullscreen with F11 and he can see the whole site. I don't want to restrict my users in options. It's good for me that F11 untouched.
有没有解决方案，原生全屏API会在第一时间触发我的javascript线？当我离开全屏时？
Is there any solution, where native fullscreen APIs will trigger my javascript lines on the first place? When I leave fullscreen?
UPDATE 2013.09.14。
我认为这是一个与Webkit相关的问题。为什么它在Firefox（F11）中不使用本机退出键，而不使用本机退出键（ESC），即使我一直处于本机全屏模式......？我们能以某种方式欺骗吗？
UPDATE 2013.09.14. I think It's a Webkit related issue. Why is it working with not native exit key in Firefox (F11) but not with native exit key (ESC), even if I was in native fullscreen mode all the time...? Can we somehow trick that?
UPDATE 2013.09.15。
by koala_dev：
UPDATE 2013.09.15. By koala_dev:
$(".expand").on("click", function() {
$(document).toggleFullScreen();
});
$(document).on("fullscreenchange", function() {
if($(document).fullScreen()){
//Just went into fullscreen
$("#header-container, #footer-container").addClass('toggle-display');
$("header, footer").addClass('toggle-height');
$("a.expand").addClass('toggle-bottom');
}else{
//Just exit fullscreen
$("#header-container, #footer-container").removeClass('toggle-display');
$("header, footer").removeClass('toggle-height');
$("a.expand").removeClass('toggle-bottom');
}
});
更新2013.09.16 - 解决方案！
在 fullscreenchange 活动中没有帮助拨打 atmeretezo（），所以我做了一点点搜索。事实证明有一个：全屏 CSS伪类！ ：）
Didn't helped to call atmeretezo() inside fullscreenchange event, so I made a little search. It turns out there is a :fullscreen CSS pseudo-class! :)
https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
https://developer.mozilla.org/en-US/docs/Web/Guide / API / DOM / Using_full_screen_mode
http://www.sitepoint.com/html5-full-screen-api/
所以我用这个替换了js：
So I replaced the js with this:
// https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
// http://www.sitepoint.com/html5-full-screen-api/
$(document).ready(function(){
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
$(".expand").on("click", function() {
toggleFullScreen();
});
});
我将这些行添加到CSS中：
An I added these lines into CSS:
/* EXPAND */
:-webkit-full-screen #header-container { display: none; visibility: hidden; }
:-webkit-full-screen #footer-container { display: none; visibility: hidden; }
:-moz-full-screen #header-container { display: none; visibility: hidden; }
:-moz-full-screen #footer-container { display: none; visibility: hidden; }
:fullscreen #header-container { display: none; visibility: hidden; }
:fullscreen #footer-container { display: none; visibility: hidden; }
:-webkit-full-screen header { height: 30px; }
:-webkit-full-screen footer { height: 30px; }
:-moz-full-screen header { height: 30px; }
:-moz-full-screen footer { height: 30px; }
:fullscreen header { height: 30px; }
:fullscreen footer { height: 30px; }
:-webkit-full-screen a.expand { bottom: 5px; }
:-moz-full-screen a.expand { bottom: 5px; }
:fullscreen a.expand { bottom: 5px; }
/* EXPAND */
你不能在一行中订购更多的div，否则不会起作用（我不知道为什么，某些原因浏览器会忽略代码而不是）。
You can't order more div into one line, otherwise not will work (I don't know why, some reason the browsers will ignore the code than).
它完美无缺！ F11未受影响，Chrome，Firefox在原生全屏API模式下完美调整图像大小，CSS代码仅针对全屏修改！
And it's works perfectly! F11 untouched, Chrome, Firefox resizing the images perfectly in native fullscreen API mode and the CSS code modified only for full screen!
推荐答案
您应该使用插件提供的通知事件来提醒您全屏状态：
You should use the notification event provided by the plugin to alert of a change in the fullscreen state:
$(document).on("fullscreenchange", function() {
if($(document).fullScreen()){
//Just went into fullscreen
$("#header-container, #footer-container").addClass('toggle-display');
$("header, footer").addClass('toggle-height');
$("a.expand").addClass('toggle-bottom');
}else{
//Just exit fullscreen
$("#header-container, #footer-container").removeClass('toggle-display');
$("header, footer").removeClass('toggle-height');
$("a.expand").removeClass('toggle-bottom');
}
});
你甚至可以在没有if / else的情况下使用toggleClass而不是add /删除
You may even get away with doing this without the if/else and using just toggleClass instead of add/remove
这篇关于在Chrome / Firefox中全屏按下转义时，不会触发Keydown事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
