我正在使用javascript(例如,requestFullscreen
)和css(:-webkit-full-screen
)API来检测浏览器是否处于全屏状态。这些API成功地工作,没有问题。
我的问题在于,如果用户按下F11,它不会在浏览器环境中注册,并且javascript API和CSS API无法检测到全屏状态。有没有什么解决方法?我的一些动画取决于屏幕大小(关于全屏),我已经陷入了死胡同。
我正在使用javascript(例如,requestFullscreen
)和css(:-webkit-full-screen
)API来检测浏览器是否处于全屏状态。这些API成功地工作,没有问题。
我的问题在于,如果用户按下F11,它不会在浏览器环境中注册,并且javascript API和CSS API无法检测到全屏状态。有没有什么解决方法?我的一些动画取决于屏幕大小(关于全屏),我已经陷入了死胡同。
(function() {
var checktimer;
function isFullScreen() {
return (window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height);
}
$(window).on('resize', function() {
if(typeof checktimer!="undefined") { clearTimeout(checktimer); }
checktimer = setTimeout(function() { alert(isFullScreen()); },2000);
});
})();
请注意,对isFullScreen()函数的调用是有时间限制的。原因是某些浏览器将全屏操作进行动画处理,直到停止动画才会触发resize事件。
在Firefox和Chrome上尝试过 - ff在此处使用window.fullScreen。我没有查看其他浏览器,但很容易在返回值检查中添加它们。
$(window).on('resize', function() { });
也可以检测到我的(Chrome版本33.0.1750.154m)。on('keydown'/'keyup')
的方式,我使用它时会有多个调用,所以只要你在之后使用off('keydown'/'keyup')
,它就会运行你的函数一次。*window.onresize
,而不是keydown
。$(document).on('keydown', function(event) {
$(document).off('keydown');
$(window).on('resize', function() {
if ($('body').hasClass('fullscreenOn')) {
$('body').removeClass('fullscreenOn');
// Do functions when exiting fullscreen
$(document).on('keydown'); // Turn keydown back on after functions
console.log("Exit F11");
} else {
$('body').addClass('fullscreenOn');
// Do functions when entering fullscreen
$(document).on('keydown'); // Turn keydown back on after functions
console.log("Enter F11");
}
});
});
Jsfiddle(旧版):http://jsfiddle.net/4b8VL/(注意:在第一次按下F11之前需要在结果区域内单击)
使用“resize”还具有通过JS API检测进入全屏模式的附加好处。请注意,如果您也使用JS API进行全屏显示,则应该在激活全屏显示时隐藏用于进入全屏显示(通过JS API)的按钮。因此,用户只能使用浏览器提供的退出方法 - 在通过JS API进入全屏模式时按Esc,或者在通过F11进入全屏模式时按F11。
* 更新 * 以下代码跨浏览器友好。与其检测window.onresize并将其用作切换全屏的基础,不如将F11键重定向到使用全屏API。
// fullscreen API goes here - **MDN - Using fullscreen mode -** https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
$(document).on('fullscreenchange', function(event) { // 'fullscreenchange' eventlistener from fullscreen API
event.preventDefault();
if ($('body').hasClass('fullscreen')) {
$('body').removeClass('fullscreen');
// Do functions when exiting fullscreen
console.log("Exit Fullscreen");
} else {
$('body').addClass('fullscreen');
// Do functions when entering fullscreen
console.log("Enter Fullscreen");
}
});
$(document).on('keydown', function(event) {
if (event.which == 122) {
event.preventDefault();
toggleFullScreen(); // From fullscreen API
}
});
注意:由于jsfiddle的设置方式,此方法似乎无法在jsfiddle中运行。但是,在实际网站中可以使用;请查看我一个旁边的项目 http://aaronkhare.com/playground/circa(将音量调低/关闭),以获取新代码的实际工作示例。
var isFullscreen = false;
document.addEventListener('fullscreenchange', function () {
isFullscreen = !!document.fullscreen;
yourFunction();
}, false);
document.addEventListener('mozfullscreenchange', function () {
isFullscreen = !!document.mozFullScreen;
yourFunction();
}, false);
document.addEventListener('webkitfullscreenchange', function () {
isFullscreen = !!document.webkitIsFullScreen;
yourFunction();
}, false);
function yourFunction() {
if(isFullscreen) {
$('.your-element').addClass('fullscreen');
// ...
} else {
$('.your-element').removeClass('fullscreen');
// ...
}
}
文档:
$(window).on('resize', function() { });
不够用? - B.Asselin看看这个HTML5进入全屏幕的垫片:
垫片就像一个迷你黑客,使操作跨浏览器兼容(实际上是楔子或门挡),直到浏览器弄清楚它
// detecting if browser supports fullscreen
return document.body.mozRequestFullScreen
|| document.body.webkitRequestFullScreen
|| document.body.requestFullScreen;
// requesting full screen on an elm
( elm.mozRequestFullScreen && elm.mozRequestFullScreen() )
|| ( elm.webkitRequestFullScreen && elm.webkitRequestFullScreen() )
|| ( elm.requestFullScreen && elm.requestFullScreen() );
//binding to full screen event
( document.body.requestFullScreen &&
window.addEventListener('fullscreenchange',fullScreenEvent) ) || ( document.body.webkitRequestFullScreen &&
window.addEventListener('webkitfullscreenchange',fullScreenEvent ) ) || ( document.body.mozRequestFullScreen &&
window.addEventListener('mozfullscreenchange',fullScreenEvent) );
源代码:https://gist.github.com/samccone/1653975/raw/0c5597e6bc8e312d0674ff25a67d3271916a957f/gistfile1.js
// listen for fullscreenchange and keydown events
$(document).on({
'fullscreenchange': fullscreenToggled,
'keydown': documentKeydown
});
// if F11 has been pressed, call the fullscreen api requestFullscreen method
// and return false, disabling the default browser functionality
function documentKeydown(e) {
if ( e.originalEvent.code == 'F11' ) {
$('body')[0].requestFullscreen();
return false;
}
}
// check to see if body has the :fullscreen pseudo-class
// (which only gets detected when fullscreen is launched via the api)
function fullscreenToggled() {
if ( $('body').is(':fullscreen') ) {
// we are in fullscreen mode
} else {
// not in fullscreen mode
}
}
诚然,如果用户从浏览器菜单启动全屏模式,则此方法无效,并且目前仅在Chrome(v84.0.4147.125)中进行了测试,但对我来说起作用。