JS 全屏对象操作【FullScreen对象随拿随用】

起源

相信大家都有需要全屏的时候，页面的全屏怎么做呐？目前浏览器的原生支持以及很不错了，大家可以尝试下，目前在chrome浏览器上尝试！可用！

 

封装成FullScreen对象的代码

/** 
 * 全屏操作
 *
 * 	- 是否可以切换到全屏状态【属性】   fullscreenEnabled
 * 	- 是否处于全屏状态【函数】 isFullScreen 
 *  - 展开全屏【函数】 launchFullscreen
 *  - 关闭全屏【函数】 exitFullscreen
 *
 *
 * 学习链接参考：
 * https://javascript.ruanyifeng.com/htmlapi/fullscreen.html#
 */

export const FullScreen = {
  /**
   * fullscreenEnabled属性
   * 			返回一个布尔值，表示当前文档是否可以切换到全屏状态
   */
  fullscreenEnabled: document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.msFullscreenEnabled,

  /**
   * 是否是全屏状态
   * @return  
   * 		有：返回正处于全屏状态的Element节点
   * 		没有：当前没有节点处于全屏状态， 则返回null。
   */
  isFullScreen: function() {
    return document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement;
  },

  /**
   * 展开全屏函数
   * @param  {[type]} element dom对象
   *
   * 使用：
   * 		launchFullscreen(document.getElementById("videoElement"));
   */
  launchFullscreen: function(element) {
    if (this.fullscreenEnabled) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      }

    } else {
      alert('浏览器当前不能全屏');
    }
  },


  /**
   * 关闭全屏函数
   *
   * 使用：
   * 		exitFullscreen();
   */
  exitFullscreen: function() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }

  },
};

 

搭配React食用请使用state

import React from "react";
import {
  Modal,
  message,
  Icon
} from 'antd';
import {
  FullScreen,
} from './full-screen.js';


class PopupModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      isFullScreen: false,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };


  handleOk = e => {
     this.handleCancel();
  };

  handleCancel = (e, click) => {
    this.setState({
      visible: false,
      isFullScreen: false
    });

    if (FullScreen.isFullScreen()) {
      FullScreen.exitFullscreen();
    }
  };


  isFullScreen() {
    let ele = document.getElementsByClassName("ant-modal-content")[0];
    console.log(FullScreen.fullscreenElement);
    if (FullScreen.fullscreenEnabled) {
      if (FullScreen.isFullScreen()) {
        FullScreen.exitFullscreen();
        this.setState({
          isFullScreen: false
        })
      } else {
        FullScreen.launchFullscreen(ele);
        this.setState({
          isFullScreen: true
        })
      }
    }
  }

  render() {
    let {
      isFullScreen,
      visible,
    } = this.state;
    let title = <div className="between-father-style-justify"> 
      <div>{modal && modal.title}</div>
      <div className="fullscreen-icon" onClick={this.isFullScreen.bind(this)}><Icon type={ isFullScreen ? "fullscreen-exit" : "fullscreen" } /></div>
      </div>
    return (
      <div className="container-Modal" >
          <Modal
            title={title}
            visible={visible}
            onOk={this.handleOk.bind(this)}
            onCancel={this.handleCancel.bind(this, "click")}
          >
              我是一个简单弹窗
          </Modal>
      </div>
    )
  }
}

export default PopupModal;

 

参考链接：

Fullscreen API：https://javascript.ruanyifeng.com/htmlapi/fullscreen.html#toc7