FullScreen API 全屏请求

[原文] : https://davidwalsh.name/fullscreen/

  • 找到支持的方法, 使用需要全屏的 element 调用
    function launchFullScreen(element) {
    if(element.requestFullscreen) {
    element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
    }
    }

  • 在支持全屏的浏览器中启动全屏

  • 将需要全屏显示的DOM元素作为参数,调用此方法可以让window进入全屏状态。

整个页面

launchFullScreen(document.documentElement);

某个元素

launchFullScreen(document.getElementById("videoElement"));

退出全屏:

  • 退出 fullscreen
    function exitFullscreen() {
    if(document.exitFullscreen) {
    document.exitFullscreen();
    } else if(document.mozExitFullScreen) {
    document.mozExitFullScreen();
    } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
    }
    }
调用退出全屏方法!
     exitFullscreen(); 
注意,exitFullscreen 只能通过document对象调用--而不是使用普通的DOM element.

Fullscreen属性与事件:

document.fullscreenElement : 当前处于全屏状态的元素element;
document.fullscreenEnabled: 标记fullscreen当前是否可用

当进入/退出全屏模式时,会触发fullscreenchange事件:

        var fullscreenElement = 
        document.fullscreenEnabled 
        || document.mozFullscreenElement 
        || document.webkitFullscreenElement; 
        var fullscreenEnabled = 
        document.fullscreenEnabled 
        || document.mozFullscreenEnabled 
        || document.webkitFullscreenEnabled; 
  • 在初始化全屏方法时,可以探测需要监听哪一个事件.

  • 可以改变全屏时候的样式

       Fullscreen CSS
        /* html */ 
      :-webkit-full-screen { 
        /* properties */ 
      } 
        :-moz-fullscreen { 
      /* properties */ 
      } 
    
      :fullscreen { 
      /* properties */ 
      } 
    
      /* deeper elements */ 
      :-webkit-full-screen video { 
      width: 100%; 
      height: 100%; 
      } 
    
      /* styling the backdrop */ 
      ::backdrop { 
      /* properties */ 
      }

你可能感兴趣的:(FullScreen API 全屏请求)