全屏

class FullscreenFun {

  // 获取浏览器前缀

  isFullScreen (fn) {

    let fullscreenEnabled;

    // 判断浏览器前缀

    if (document.fullscreenEnabled) {

      fullscreenEnabled = document.fullscreenEnabled;

    } else if (document.webkitFullscreenEnabled) {

      fullscreenEnabled = document.webkitFullscreenEnabled;

      return 'webkit';

    } else if (document.mozFullScreenEnabled) {

      fullscreenEnabled = document.mozFullScreenEnabled;

      return 'moz';

    } else if (document.msFullscreenEnabled) {

      fullscreenEnabled = document.msFullscreenEnabled;

      return 'ms';

    }

    if (!fullscreenEnabled) {

      if (fn !== undefined) fn(); // 执行不支持全屏的回调

      this.isFullscreenData = false;

    }

  }

  // 使元素进入全屏模式

  enterFullScreen (domName, prefixName) {

    const element = document.querySelector(domName); // 获取 DOM

    const methodName =

      prefixName === ''

        ? 'requestFullscreen'

        : `${prefixName}RequestFullScreen`; // API前缀

    element[methodName](); // 调用全屏

  }

  // 退出全屏

  exitFullScreen (prefixName) {

    const methodName =

      prefixName === ''

        ? 'exitFullscreen'

        : `${prefixName}ExitFullscreen`; // API 前缀

    document[methodName](); // 调用

  }

}

let fullScreen = new FullscreenFun();

export default {

  fullScreen

}

你可能感兴趣的:(全屏)