全屏操作 - davy-gan/web GitHub Wiki

import React, { PureComponent } from '@alipay/bigfish/react';
import Tokio from './Tokio/Tokio';

export default class AccountMonitoring extends PureComponent {
  state = {
    ww: window.innerWidth / 4096,
    hh: window.innerHeight / 2160,
    quanChange: false, // 全屏切换
  };

  componentDidMount() {
    window.addEventListener('resize', this.resize);
    this.resize();
    this.quan();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  resize = () => {
    this.setState({
      ww: document.getElementById('tokioContent').clientWidth / 4096,
      hh: document.getElementById('tokioContent').clientHeight / 2160,
    });
  };

  quan = () => {
    //  全屏切换
    this.state.quanChange = !this.state.quanChange;
    // console.log(this.state.quanChange);
    if (this.state.quanChange) {
      const element = this.tokioContent;
      if (window.ActiveXObject) {
        // eslint-disable-next-line no-undef
        const WsShell = new ActiveXObject('WScript.Shell');
        WsShell.SendKeys('{F11}');
      } else if (element.requestFullScreen) {
        element.requestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      }
    } else {
      const element = this.tokioContent;
      if (window.ActiveXObject) {
        // eslint-disable-next-line no-undef
        const WsShell = new ActiveXObject('WScript.Shell');
        WsShell.SendKeys('{F11}');
      } else if (element.requestFullScreen) {
        document.exitFullscreen();
      } else if (element.msRequestFullscreen) {
        document.msExitFullscreen();
      } else if (element.webkitRequestFullScreen) {
        document.webkitCancelFullScreen();
      } else if (element.mozRequestFullScreen) {
        document.mozCancelFullScreen();
      }
    }
  };

  render() {
    return (
      <div
        id="tokioContent"
        style={{ overflowX: 'auto' }}
        ref={e => {
          this.tokioContent = e;
        }}
      >
        <Tokio {...this.state} quan={this.quan} />
      </div>
    );
  }
}