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

最新推荐文章于 2024-06-03 09:40:20 发布

Candy_home

最新推荐文章于 2024-06-03 09:40:20 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

分类专栏： js 学习文章标签： js 全屏全屏对象封装 fullscreen 浏览器全屏

本文链接：https://blog.youkuaiyun.com/Candy_home/article/details/100530048

本文介绍了如何利用JavaScript封装全屏对象，适用于浏览器全屏操作，特别提到了在React中结合state的应用，并提供了Fullscreen API的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起源

相信大家都有需要全屏的时候，页面的全屏怎么做呐？目前浏览器的原生支持以及很不错了，大家可以尝试下，目前在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对象
   *