react 实现全屏效果

render()

{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(

      "webkitfullscreenchange",

      function () {

        _self.setState({

          isFullScreen: document.webkitIsFullScreen,

        });

      },

      false

    );

  };

 

return  <div><span onClick={this.fullScreen}> 点击进入全屏 </span></div>

 

 

}