react点击按钮实现全屏功能

一、绘制全屏按钮

1.  
    
2.  
   <div className='title' > <button onClick={this.fullScreen}>全屏</button></div>

二、编写点击事件

定义全屏标识变量

1.  
   this.state = {
2.  
   isFullScreen: false//初始为未开启全屏
3.  
   }

编写fullScreen点击事件函数：

1.  
   fullScreen = () => {
2.  
   var picts = document.getElementById("picts");
3.  
   if (!this.state.isFullScreen) {
4.  
   this.requestFullScreen();
5.  
   picts.setAttribute("src",require("./取消全屏.png"));//全屏按钮变换
6.  
   picts.setAttribute("title","退出全屏");
7.  
   } else {
8.  
   this.exitFullscreen();
9.  
   picts.setAttribute("src",require("./全屏.png"));//全屏按钮变换
10.  
    picts.setAttribute("title","全屏");
11.  
    }
12.  
    };

三、编写相关函数

编写requestFullScreen函数

1.  
   requestFullScreen = () => {
2.  
   var de = document.documentElement;
3.  
   if (de.requestFullscreen) {
4.  
   de.requestFullscreen();
5.  
   } else if (de.mozRequestFullScreen) {
6.  
   de.mozRequestFullScreen();
7.  
   } else if (de.webkitRequestFullScreen) {
8.  
   de.webkitRequestFullScreen();
9.  
   }
10.  
    };

编写exitFullscreen函数

1.  
   exitFullscreen = () => {
2.  
   var de = document;
3.  
   if (de.exitFullscreen) {
4.  
   de.exitFullscreen();
5.  
   } else if (de.mozCancelFullScreen) {
6.  
   de.mozCancelFullScreen();
7.  
   } else if (de.webkitCancelFullScreen) {
8.  
   de.webkitCancelFullScreen();
9.  
   }
10.  
    };

编写监听fullscreen变化事件

1.  
   watchFullScreen = () => {
2.  
   const _self = this;
3.  
   document.addEventListener(
4.  
   "webkitfullscreenchange",
5.  
   function() {
6.  
   _self.setState({
7.  
   isFullScreen: document.webkitIsFullScreen
8.  
   });
9.  
   },
10.  
    false
11.  
    );
12.  
    document.addEventListener(
13.  
    "fullscreenchange",
14.  
    function() {
15.  
    _self.setState({
16.  
    isFullScreen: document.fullscreen
17.  
    });
18.  
    },
19.  
    false
20.  
    );
21.  
    document.addEventListener(
22.  
    "mozfullscreenchange",
23.  
    function() {
24.  
    _self.setState({
25.  
    isFullScreen: document.mozFullScreen
26.  
    });
27.  
    },
28.  
    false
29.  
    );
30.  
    };

在componentDidMount钩子上挂在监听

1.  
   componentDidMount() {
2.  
   this.watchFullScreen();
3.  
   }

这篇好文章是转载于：学新通技术网