js

fullscreenchange

点击一张图片使其在全屏和不全屏间切换

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
44
45
46
<img id="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3209370120,2008812818&fm=26&gp=0.jpg" alt="">

<script> 
$img = document.getElementById('img')
$img.addEventListener('click', function() {
  if (document.fullscreenElement) {
    // 取消全屏
    exitFullscreen()
  } else {
    // 进入全屏
    requestFullscreen(this)
  }
})

function requestFullscreen(el) {
    if (el.requestFullscreen) {
      el.requestFullscreen()
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen()
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen()
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullScreen()
    }
}
function exitFullscreen() {
  if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullScreen()
    }
}

document.addEventListener('fullscreenchange', (event) => {
  // 每次切换全屏模式都会触发fullscreenchange事件
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});
</script>