页面全屏&退出全屏 React js

    技术2023-09-08  104

    import React, { Component } from 'react' export default class FullScreen extends Component { toggleFullScreen() { if ( !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen() } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen() } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen() } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT) } } else { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } } } render() { return ( <span className="tool-name" onClick={this.toggleFullScreen}>全屏</span> ) }
    Processed: 0.008, SQL: 9