fullScreen.ts
1.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
const isFullScreen = document.fullscreenElement
const currentDatkTheme = htmlName.getAttribute('data-theme')
if (isFullScreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
domName.style.background = currentDatkTheme === 'light' ? '' : ''
}
} else {
//兼容其他浏览器
if (domName.requestFullscreen) {
domName.requestFullscreen()
domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
} else if (domName.mozRequestFullScreen) {
domName.mozRequestFullScreen()
domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
} else if (domName.webkitRequestFullscreen) {
domName.webkitRequestFullscreen()
domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
} else if (domName.msRequestFullscreen) {
domName.msRequestFullscreen()
domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
}
}
//fix 浏览器监听esc退出
function exitHandler() {
if (
!(document as any).webkitIsFullScreen &&
!(document as any).mozFullScreen &&
!(document as any).msFullscreenElement
) {
domName.style.background = currentDatkTheme === 'light' ? '' : ''
}
}
// 监听fullscreenchange事件（全屏模式的变化）
if (document.addEventListener) {
document.addEventListener('webkitfullscreenchange', exitHandler, false)
document.addEventListener('mozfullscreenchange', exitHandler, false)
document.addEventListener('fullscreenchange', exitHandler, false)
document.addEventListener('MSFullscreenChange', exitHandler, false)
}
}