html 监听后端变化_HTML5全屏事件监听器

I'm trying to detect if the current document is fullscreen or not using:

document.addEventListener('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {

if ((document.fullScreenElement && document.fullScreenElement !== null) ||

(!document.mozFullScreenElement && !document.webkitFullScreenElement)) {

console.log('fullscreen');

} else {

console.log('not fullscreen');

}

}, false);

But the event NEVER gets fired no matter I do to enter or exit fullscreen.

Any ideas?

解决方案

This is what I have gone with at the moment:

function check() {

if (!window.screenTop && !window.screenY) {

console.log('not fullscreen');

} else {

console.log('fullscreen');

}

}

document.addEventListener('webkitfullscreenchange', function(e) {

check();

}, false);

document.addEventListener('mozfullscreenchange', function(e) {

check();

}, false);

document.addEventListener('fullscreenchange', function(e) {

check();

}, false);

This isn't necessarily the best solution to the question, but it does work!

I'd almost ALWAYS use jQuery and bind the events all together as shown by Patrick Hofman.

E.g.

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e)

{

if (!window.screenTop && !window.screenY) {

console.log('not fullscreen');

} else {

console.log('fullscreen');

}

});

But for the sake of keeping it library-free I've not included it in my answer, as the question was double ended and trying to figure out how to detect fullscreen in native JavaScript.

Thanks for the help, and feel free to add additional solutions / suggestions for others who are trying to achieve the same.