html5 safari浏览器 全屏显示 隐藏工具条,HTML5实现全屏API【进去和退出全屏】

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

【进入和退出全屏】

// 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);