html5实现网页全屏

来源：互联网发布：python cv2.threshold 编辑：程序博客网时间：2024/05/16 18:08

【进入和退出全屏】

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

0 0