全屏

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

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容