现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样:
【进入和退出全屏】
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
【兼容解决方案】
/**
* 进入全屏
*/
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.body.addEventListener('click',function(){
requestFullScreen();
//5秒钟自动退出全屏
setTimeout(function(){
exitFullscreen();
},5000);
},false);