lanbos'blog

Fullscreen API:全屏操作

参考自《让你的页面全屏》


进入全屏方法:

1
2
3
4
5
6
7
8
9
10
11
12
//需要传入dom对象
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}

全屏状态改变监听:

1
2
3
4
5
6
7
8
9
10
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement) {
console.log('退出全屏');
} else {
console.log('进入全屏');
}
});