API

  • 方法

    • requestFullscreen()

      • 请求进入全屏模式

    • exitFullscreen()

      • 退出全屏模式

  • 事件

    • fullscreenchange

      • 进入/退出全屏模式切换时会触发

    • fullscreenerror

      • 进入/退出全屏模式失败时会触发

浏览器兼容

根据不同的浏览器内核调用不同的方法

  1. // 开启全屏
  2. function lanchFullscreen(e){
  3.     if (e.requestFullscreen) {
  4.         e.requestFullscreen();
  5.     }
  6.     if (e.mozRequestFullScreen) {
  7.         e.mozRequestFullScreen();
  8.     }
  9.     if (e.msRequestFullscreen) {
  10.         e.msRequestFullscreen();
  11.     }
  12.     if (e.webkitRequestFullscreen) {
  13.         e.webkitRequestFullscreen();
  14.     }
  15. }
  17. // 退出全屏
  18. function exitFullscreen(){
  19.     if(document.exitFullscreen){
  20.         document.exitFullscreen();
  21.     }
  22.     if(document.mozCancelFullScreen){
  23.         document.mozCancelFullScreen();
  24.     }
  25.     if(document.msExitFullscreen){
  26.         document.msExiFullscreen();
  27.     }
  28.     if(document.webkitCancelFullScreen){
  29.         document.webkitCancelFullScreen();
  30.     }
  31. }

各个浏览的事件监听

// 成功
document.addEventListener('fullscreenchange', callback});
document.addEventListener('webkitfullscreenchange', callback);
document.addEventListener('mozfullscreenchange', callback);
document.addEventListener('MSFullscreenChange', callback);

// 失败
document.addEventListener('fullscreenerror', callback);
document.addEventListener('webkitfullscreenerror', callback);
document.addEventListener('mozfullscreenerror', callback);
document.addEventListener('MSFullscreenError', callback);

全屏样式

:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }

demo - chrome

// 成功的监听事件
document.addEventListener("webkitfullscreenchange", function( event ) {
  console.log('success');
  return document.fullscreenElement; // 返回打开全屏的监听元素
});

// 失败的监听事件
document.addEventListener("webkitfullscreenerror", function( event ) {
  console.log('error');
});

// 浏览器全屏
document.documentElement.webkitRequestFullscreen();

// 某个元素(DOM)全屏
document.getElementById('myDiv').webkitRequestFullscreen();