下面的代码在Internet Explorer中可以正常工作,但在Chrome中,只有在调试模式下它才能工作,这是怎么回事?
window.onresize = function (e) {
if (window.outerWidth === screen.width && window.outerHeight == screen.height) {
if (!fullscreen) {
fullscreen = true;
onfullscreenchange(true);
}
} else {
if (fullscreen) {
fullscreen = false;
onfullscreenchange(false);
}
}
};
function onfullscreenchange(full) {
alert(full);
}
这是一个监听窗口是否已用F11全屏显示的示例。此代码不仅监听resize
事件,还监听F11,因为resize
进入全屏模式时不会在Chrome中触发该事件。
// Function to check if the window is fullscreened or not
var isFullscreen = function(){
return (window.outerWidth === screen.width && window.outerHeight === screen.height);
};
// Function to run when window size has changed
var screenSizeChange = function(){
if (isFullscreen()) {
document.querySelector('body').innerHTML = 'You are in fullscreen mode';
} else {
document.querySelector('body').innerHTML = 'You are in windowed mode';
}
};
// Run screenSizeChange when `resize` event is triggered
window.addEventListener('resize', screenSizeChange, false);
// Run screenSizeChange when F11 is pressed
window.addEventListener('keyup', function(e){
if (e.keyCode === 122) { // Listen for F11
screenSizeChange();
}
}, false);
尝试的实时版本:http://jsbin.com/ciqeb/4/edit?js,输出
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句