【JS Plugin】fullscreen (简易轻量化类原生的高兼容窗口全屏控件)

fullscreen (全屏控件)

项目主页

https://gitee.com/miikio/fullscreen

项目简介

• 版本： 1.1.0
• 更新时间： 2024.4.10
• 兼容性： Chrome, Firefox, Opera, Safari, Edge, IE 9+
• 定位：HTML5 API 扩展工具类
• 介绍：简易轻量化类原生的高兼容窗口全屏控件。
• 源码下载：https://gitee.com/miikio/fullscreen/releases/download/fullscreen-v1.1.0-release.20240410/fullscreen-v1.1.0.js

API属性

属性名称	属性类型	API描述	API返回
.isEnabled	Boolean	全屏控件是否可用	–
.isFullscreen	Boolean	当前是否已全屏	–
.proxyKeydown	Boolean	当前是否已代理F11按键切换全屏	–
.element	HTMLElement	当前全屏的元素	–
.request	Function	启用全屏。参数：(element: 变为全屏的元素，默认为HTML根元素, options: 全屏配置)	Promise<any>
.exit	Function	退出全屏	Promise<any>
.toggle	Function	切换全屏。参数：(valid: 是否全屏，默认为切换, element: 变为全屏的元素，仅切换为全屏时生效, options: 全屏配置，仅切换为全屏时生效)	Promise<any>
.onchange	Function	全屏状态更变成功的回调 (仅赋值更改)	Function
.onerror	Function	全屏状态更变出错的回调 (仅赋值更改)	Function
.on	Function	绑定全屏状态更变成功/出错的回调事件。参数：(type: ( ‘change’ | ‘error’ ), handler: 回调方法, options: 绑定配置)	void
.off	Function	解绑全屏状态更变成功/出错的回调事件。参数：(type: ( ‘change’ | ‘error’ ), handler: 回调方法, options: 绑定配置)	void
.raw	Object	当前控件实例支持的原生API名称	–

使用示例

// 引入控件实例，路径为具体引入包的位置
import fullscreen from 'fullscreen'

// 当前环境是否支持全屏控件可用
console.log(fullscreen.isEnabled)

// 当前是否已开启全屏
console.log(fullscreen.isFullscreen)

// 当前是否已代理F11按键切换全屏
console.log(fullscreen.proxyKeydown)

// 当前全屏的元素
console.log(fullscreen.element)

// 代理按键切换全屏，启用后控件监听对通过F11按键切换全屏生效
fullscreen.proxyKeydown = true

// 启用全屏
fullscreen.request()

// 将文档中某个元素启用全屏
fullscreen.request(document.getElementById('demo'))

// 退出全屏
fullscreen.exit()

// 切换全屏
fullscreen.toggle()

// 等同于启用全屏
fullscreen.toggle(true)

// 等同于退出全屏
fullscreen.toggle(false)

// 将文档中某个元素切换全屏 (多次执行可见效果)
fullscreen.toggle(document.getElementById('demo'))

// 绑定一个全屏状态更变成功时的操作
fullscreen.onchange = function (e) {
  console.log('onchange: ', e)
}

// 绑定一个全屏状态更变出错时的操作
fullscreen.onerror = function (e) {
  console.log('onerror: ', e)
}

// 绑定/解绑一个全屏状态更变成功时的操作
const fn = function (e) { console.log('change: ', e) }
fullscreen.on('change', fn)
fullscreen.off('change', fn)

// 为全屏元素添加伪类样式
const cssRule = `.demo${fullscreen.raw[':fullscreen']} { background: red; }`
if (document.styleSheets.length) {
  const sheet = document.styleSheets[document.styleSheets.length - 1]
  sheet.insertRule(cssRule, sheet.cssRules.length)
} else {
  const style = document.createElement('style')
  style.innerHTML = cssRule
  document.head.appendChild(style)
}