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 */ 
    }