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

本文介绍了如何利用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对象
   *
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值