js实现全屏

434 阅读2分钟

这是我参与8月更文挑战的第28天,活动详情查看:8月更文挑战

前言

全屏API可以控制浏览器的全屏显示,让一个Element节点(以及子节点)占满用户的整个屏幕。目前各大浏览器的最新版本都支持这个API(包括IE11),但是使用的时候需要加上浏览器前缀。

requestFullscreen()

//Element节点的requestFullscreen方法,可以使得这个节点全屏。

function openFullscreen(element) {
  if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
    }
}

openFullscreen(document.documentElement);
openFullscreen(document.getElementById("id"));

放大一个节点时,Firefox和Chrome在行为上略有不同。Firefox自动为该节点增加一条CSS规则,将该元素放大至全屏状态,width: 100%; height: 100%,而Chrome则是将该节点放在屏幕的中央,保持原来大小,其他部分变黑。为了让Chrome的行为与Firefox保持一致,可以自定义一条CSS规则。

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

exitFullscreen()

//document对象的exitFullscreen方法用于取消全屏。该方法也带有浏览器前缀。
//

function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExiFullscreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

exitFullScreen();

用户手动按下ESC键或F11键,也可以退出全屏键。此外,加载新的页面,或者切换tab,或者从浏览器转向其他应用(按下Alt-Tab),也会导致退出全屏状态。

document.fullscreenElement

fullscreenElement属性返回正处于全屏状态的Element节点,如果当前没有节点处于全屏状态,则返回null。

var fullscreenElement =
  document.fullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement;

document.fullscreenEnabled

fullscreenEnabled属性返回一个布尔值,表示当前文档是否可以切换到全屏状态。

var fullscreenEnabled =
  document.fullscreenEnabled ||
  document.mozFullScreenEnabled ||
  document.webkitFullscreenEnabled ||
  document.msFullscreenEnabled;

if (fullscreenEnabled) {
  videoElement.requestFullScreen();
} else {
  console.log('浏览器当前不能全屏');
}

全屏事件

以下事件与全屏操作有关。

  • fullscreenchange事件:浏览器进入或离开全屏时触发。
  • fullscreenerror事件:浏览器无法进入全屏时触发,可能是技术原因,也可能是用户拒绝。
document.addEventListener("fullscreenchange", function( event ) {
  if (document.fullscreenElement) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
});

上面代码在发生fullscreenchange事件时,通过fullscreenElement属性判断,到底是进入全屏还是退出全屏。

全屏状态的CSS

全屏状态下,大多数浏览器的CSS支持:full-screen伪类,只有IE11支持:fullscreen伪类。使用这个伪类,可以对全屏状态设置单独的CSS属性。

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}