直接上代码。
// 选择全屏的元素
var main = document.body;
// 判断是否全屏
var sort=document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
// 根据状态选择是否全屏
if (sort) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (main.requestFullscreen) {
main.requestFullscreen();
} else if (main.mozRequestFullScreen) {
main.mozRequestFullScreen();
} else if (main.webkitRequestFullScreen) {
main.webkitRequestFullScreen();
} else if (main.msRequestFullscreen) {
main.msRequestFullscreen();
}
}
可以把代码全部复制到控制台进行测试。
复制上面全部代码到控制台 -> 回车即可。
可能会出现样式的问题,自己更改样式吧。
/* 全屏时元素的样式 (上面的例子指的是body元素) 如,宽度为800px*/
:-webkit-full-screen {
width:800px;
}
:-moz-fullscreen {
width:800px;
}
:fullscreen {
width:800px;
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
/* styling the backdrop */
::backdrop {
/* properties */
}