react 实现全屏预览功能,使用 h5requestFullScreen api

进入全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
requestFullscreen = () => {
const _this = this.fullFlow // ref
if (!_this) return
if (_this?.requestFullscreen) {
_this?.requestFullscreen()
} else if (_this?.mozRequestFullScreen) {
_this?.mozRequestFullScreen()
} else if (_this?.webkitRequestFullscreen) {
_this?.webkitRequestFullscreen()
} else if (_this?.msRequestFullscreen) {
_this?.msRequestFullscreen()
}
}

退出全屏

1
2
3
4
5
6
7
8
9
10
11
12
exitFullscreen = () => {
if (!document) return
if (document?.exitFullscreen) {
document?.exitFullscreen()
} else if (document?.mozCancelFullScreen) {
document?.mozCancelFullScreen()
} else if (document?.webkitExitFullscreen) {
document?.webkitExitFullscreen()
} else if (document?.msExitFullscreen) {
document?.msExitFullscreen()
}
}