html实现全屏效果原理,HTML5 实现全屏效果

HTML5 实现全屏效果

点击进入全屏和点击退出全屏方法：

//进入全屏

function requestFullScreen() {

var de = document.documentElement;

if (de.requestFullscreen) {

de.requestFullscreen();

} else if (de.mozRequestFullScreen) {

de.mozRequestFullScreen();

} else if (de.webkitRequestFullScreen) {

de.webkitRequestFullScreen();

}

}

//退出全屏

function exitFullscreen() {

var de = document;

if (de.exitFullscreen) {

de.exitFullscreen();

} else if (de.mozCancelFullScreen) {

de.mozCancelFullScreen();

} else if (de.webkitCancelFullScreen) {

de.webkitCancelFullScreen();

}

}

只能点击进入全屏，不能一加载页面进去全屏

[案例]

document.addEventListener('click',function(){

requestFullScreen();

//3秒钟自动退出全屏

setTimeout(function(){

exitFullscreen();

},3000);

});