zoukankan      html  css  js  c++  java
  • 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);

  • 相关阅读:
    和阿文一起学H5-文字云制作
    uml与数据库设计
    设计模式——面向对象设计原则
    koajs框架解决的问题
    mongodb
    javascript 获取select选中text,2种方法
    带参数跳转
    express表单提交和参数接收4种方式
    ejs模版的4种输出方式
    nodejs事件
  • 原文地址:https://www.cnblogs.com/mljun/p/7448896.html
Copyright © 2011-2022 走看看