javascript实现全屏

283 阅读1分钟
import {useState} form "react"
const CodeDemo = ()=>{
  const [isFullScreen,setIsFullScreen]=useState(false) // 控制是否全屏
  
 const handleClickFullScreen = (e) => {
    toggleFullScreen(codeMirrorWrapRef.current)
  }

  const toggleFullScreen = (element) => {
    const fullscreen = document.fullscreenElement
    if (!fullscreen) {
      setisFullScreen(true)
      const fullScreenRequestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen || // 谷歌
        element.mozRequestFullScreen || // 火狐
        element.msRequestFullScreen // IE11
      if (fullScreenRequestMethod) {
        fullScreenRequestMethod.call(element)
      }
    } else if (document.exitFullscreen) {
      setisFullScreen(false) 
      document.exitFullscreen()
    }
  }

  return (
    <div  ref={compareEditorWrapper} >
      <Button onClick={handleClickFullScreen}>全屏</Button>
       <div
          ref={compareEditor}
        />
    </div>
  )
}