H5实现浏览器全屏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);

posted @ 2017-08-29 16:23  xx2016  阅读(1956)  评论(0编辑  收藏  举报