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

  • 相关阅读:
    html
    jQuery
    Python基础(一)
    excel中怎样批量取消隐藏工作表
    AD密码过期查询
    @Controller和@RestController的区别
    编写一个JPA测试用例
    SpringBoot(二)——使用Mysql和JPA
    Linux命令大全
    Centos7安装Mysql
  • 原文地址:https://www.cnblogs.com/mljun/p/7448896.html
Copyright © 2020-2023  润新知