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();
      }

      this.isFullScreenNow = true;
    } 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();
    }

    this.isFullScreenNow = false;
  },
};

 

搭配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;