1、全屏模式：requestFullscreen()方法用于发出异步请求实现元素全屏显示
const openFullscreen = () => {
const full = document.getElementById('content')
if (full.RequestFullScreen) {
full.RequestFullScreen()
} else if (full.mozRequestFullScreen) {
full.mozRequestFullScreen()
} else if (full.webkitRequestFullScreen) {
full.webkitRequestFullScreen()
} else if (full.msRequestFullscreen) {
full.msRequestFullscreen()
}
}
2、取消全屏模式：exitFullscreen()方法退出全屏模式
const exitFullscreen = () => {
function exitFullscreen() {
if(document.exitFullScreen) {
document.exitFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if(element.msExitFullscreen) {
element.msExitFullscreen();
}
}
}
3、返回当前页面以全屏显示的element节点，如果没有使用全屏模式,则返回null
const getFullscreenElement = () => {
return (
document.fullscreenElement ||
document.mozFullScreenElement ||
document.msFullScreenElement ||
document.webkitFullscreenElement||null
);
}
4、判断当前是否全屏，fullscreen已废弃，可以通过检查document.fullscreenelement是否为null来确定文档上是否启用全屏模式
const isFullScreen = () => {
return !! (
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
}
5、返回一个布尔值，表明浏览器是否支持全屏模式。全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个<iframe>元素中的页面,则它必需拥有mozallowfullscreen属性
const isFullscreenEnabled = () => {
return (
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled
);
}
- requestFullscreen方法只能在用户交互或者设备方向改变的时候调用，否则将会失败，比如：在onload事件中不能触发
- 路由页面跳转需先退出全屏模式
- 进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效，可以使用 :full-screen伪类解决
- 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
- 一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏
