页面全屏&退出全屏 React js

最新推荐文章于 2025-11-17 04:37:36 发布

原创最新推荐文章于 2025-11-17 04:37:36 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #react

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一个使用React实现的全屏切换功能的组件。该组件通过检测浏览器的全屏状态并调用相应的API来进入或退出全屏模式，兼容多种浏览器的全屏API。

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>
		)
  }