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

    【兼容解决方案】

     1 //进入全屏
     2 function requestFullScreen() {
     3     var de = document.documentElement;
     4     if (de.requestFullscreen) {
     5         de.requestFullscreen();
     6     } else if (de.mozRequestFullScreen) {
     7         de.mozRequestFullScreen();
     8     } else if (de.webkitRequestFullScreen) {
     9         de.webkitRequestFullScreen();
    10     }
    11 }
    12 //退出全屏
    13 function exitFullscreen() {
    14     var de = document;
    15     if (de.exitFullscreen) {
    16         de.exitFullscreen();
    17     } else if (de.mozCancelFullScreen) {
    18         de.mozCancelFullScreen();
    19     } else if (de.webkitCancelFullScreen) {
    20         de.webkitCancelFullScreen();
    21     }
    22 }

    注:可能出于安全考虑,只能手动触发才能实现全屏,浏览器自动执行无效果。

    【实例】

    document.body.addEventListener('click',function(){
        requestFullScreen();
        //5秒钟自动退出全屏
        setTimeout(function(){
            exitFullscreen();
        },5000);
    },false);
  • 相关阅读:
    JAVA 多线程(3)
    JAVA 多线程(2)
    JAVA 多线程(1):synchronized
    阿里金服设置公钥-验证私钥
    linux (1): 启动
    新建项目虚拟环境及pycharm配置
    python创建udp服务端和客户端
    python创建tcp服务端和客户端
    python并发(阻塞、非阻塞、epoll)
    mongo基本操作
  • 原文地址:https://www.cnblogs.com/kingwell/p/3706352.html
Copyright © 2011-2022 走看看