利用React顯示全屏，實(shí)現(xiàn)F11的效果舟舒。
是不是聽上去很傻拉庶，明明可以按F11解決的事，非要求添加一個按鈕控制秃励。
話不多說氏仗，代碼走起！
首先利用React生命周期夺鲜，在頁面渲染前監(jiān)控屏幕大小皆尔。當(dāng)document.body.scrollHeight === window.screen.height 或者 document.body.scrollWidth === window.screen.width 的時候表示頁面處于全屏狀態(tài)，此時圖標(biāo)變?yōu)橥嘶厝帘依粗畡t是全屏圖標(biāo)慷蠕。
因?yàn)橛械臑g覽器不支持全屏模式，所以在此之前設(shè)置一個函數(shù) 檢測當(dāng)前瀏覽器是否支持全屏食呻，如果支持則顯示全屏按鈕流炕。反之，不顯示仅胞。

import React, { Component } from "react";
import { Button } from "antd";
import { judgeIsSupportFull, fullScreen, fullExit } from "../FullScreen/index";
export default class FullScree extends Component {
  state = {
    isSupportFull: false,
    isFull: false
  };
  componentDidMount() {
    window.addEventListener("resize", this.changeFullStatus);
    this.judgeIsSupportFull();
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.changeFullStatus);
  }
  // 判斷當(dāng)前瀏覽器是否支持全屏API
  judgeIsSupportFull = () => {
    let isSupportFull = judgeIsSupportFull();
    this.setState({ isSupportFull });
  };
  // 計算當(dāng)前是否處于全屏
  changeFullStatus = () => {
    // 判斷網(wǎng)頁的高度或者寬度是否等于屏幕對應(yīng)大小
    // true: 當(dāng)前處于全屏狀態(tài)
    // false: 當(dāng)前不處于全屏狀態(tài)
    if (
      document.body.scrollHeight === window.screen.height ||
      document.body.scrollWidth === window.screen.width
    ) {
      this.setState({ isFull: true });
    } else {
      this.setState({ isFull: false });
    }
  };
  // click button
  handClick = () => {
    this.state.isFull ? fullExit() : fullScreen();
  };
  // ============================================================
  render() {
    let { isSupportFull } = this.state;

    if (!isSupportFull) {
      return null;
    }

    return (
      <Button
        style={{ border: "none", color: "#696969" }}
        onClick={this.handClick}
        shape="circle"
        icon={this.state.isFull ? "shrink" : "arrows-alt"}
      />
    );
  }
}

export const judgeIsSupportFull = () => {
  let result = false;
  let element = document.documentElement;
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject) {
    result = true;
  }
  //HTML W3C 提議
  else if (element.requestFullScreen) {
    result = true;
  }
  //IE11
  else if (element.msRequestFullscreen) {
    result = true;
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    result = true;
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    result = true;
  }

  return result;
};
//顯示全屏
export const fullScreen = () => {
  let element = document.documentElement;
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject) {
    console.log("IE 10及以下ActiveXObject");
    let WsShell = new ActiveXObject("WScript.Shell");
    WsShell.SendKeys("{F11}");
  }
  //HTML W3C 提議
  else if (element.requestFullScreen) {
    console.log("HTML W3C 提議");
    element.requestFullScreen();
  }
  //IE11
  else if (element.msRequestFullscreen) {
    console.log("IE11");
    element.msRequestFullscreen();
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    console.log("Webkit");
    element.webkitRequestFullScreen();
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    console.log("Firefox");
    element.mozRequestFullScreen();
  }
};
//退出全屏
export const fullExit = () => {
  var element = document.documentElement;
  //IE ActiveXObject
  if (window.ActiveXObject) {
    var WsShell = new ActiveXObject("WScript.Shell");
    WsShell.SendKeys("{F11}");
  }
  //HTML5 W3C 提議
  else if (element.requestFullScreen) {
    document.exitFullscreen();
  }
  //IE 11
  else if (element.msRequestFullscreen) {
    document.msExitFullscreen();
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    document.webkitCancelFullScreen();
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    document.mozCancelFullScreen();
  }
};