<div ref={DOMRef}> 我要全屏 </div>
<Button onClick={onFull} >
{!isFull ? "全屏模式" : "退出全屏"}
</Button >
const DOMRef = useRef<any>()
const [isFull, setIsFull] = useState<boolean>(false);
const onFull = () => {
const IsFull = !isFull;
setIsFull(IsFull)
const DOM = DOMRef?.current as any
if (IsFull) {
onFullScreen(DOM)
} else {
exitScreen(DOM)
}
}
const onFullScreen = (DOM: any) => {
let el = DOM as any
let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
if (typeof rfs != "undefined" && rfs) {
rfs.call(el)
return
}
if (typeof window.ActiveXObject != "undefined") {
let wscript = new window.ActiveXObject("WScript.Shell")
if (wscript) {
wscript.SendKeys("{F11}")
}
}
}
const exitScreen = (DOM: any) => {
let el = DOM as any
let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
let doc = document as any
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
} else if (doc.webkitCancelFullScreen) {
doc.webkitCancelFullScreen();
} else if (doc.msExitFullscreen) {
doc.msExitFullscreen();
}
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
}