React 實現頁面全屏效果
阿新 • • 發佈:2018-11-28
HTML程式碼:
<a
onClick={this.fullScreen}
style={{ margin: "0 6px 0 6px"}}
>全屏</a>
js程式碼:
state = { isFullScreen: false } fullScreen = () => { console.log('fullscreen:',this.state.isFullScreen); if (!this.state.isFullScreen) { this.requestFullScreen(); } else { this.exitFullscreen(); } }; //進入全屏requestFullScreen = () => { console.log('requestFullScreen') var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } }; //退出全屏 exitFullscreen = () => { console.log('exitFullscreen') var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }; //監聽fullscreenchange事件 watchFullScreen = () => { const _self = this; document.addEventListener( "fullscreenchange", function() { _self.setState({ isFullScreen: document.fullscreen }); }, false ); document.addEventListener( "mozfullscreenchange", function() { _self.setState({ isFullScreen: document.mozFullScreen }); }, false ); document.addEventListener( "webkitfullscreenchange", function() { _self.setState({ isFullScreen: document.webkitIsFullScreen }); }, false ); };