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

fullscreen (全屏控件)

项目主页

https://gitee.com/miikio/fullscreen

项目简介

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

API属性

属性名称	属性类型	API描述	API返回
.raw	Object	当前控件实例支持的原生API名称	Object
.isEnabled	Boolean	全屏控件是否可用	Boolean
.isFullscreen	Boolean	当前是否已全屏	Boolean
.element	HTMLElement	当前全屏的元素	HTMLElement
.request	Function	启用全屏，参数：(element: 变为全屏的元素，默认为HTML根元素, options: 全屏配置)	Promise<resolve>
.exit	Function	退出全屏	Promise<resolve>
.toggle	Function	切换全屏，参数：(valid: 是否全屏，默认为切换, element: 变为全屏的元素，仅切换为全屏时生效, options: 全屏配置，仅切换为全屏时生效)	Promise<resolve>
.onchange	Function	全屏状态改变时的操作 (仅可赋值更改)	Function
.onerror	Function	全屏改变时返回错误的操作 (仅可赋值更改)	Function

使用示例

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

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

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

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

// 启用全屏
fullscreen.request()

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

// 退出全屏
fullscreen.exit()

// 切换全屏
fullscreen.toggle()

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

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

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

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

// 绑定一个全屏改变时返回错误的操作
fullscreen.onerror = function(e) {
  console.log('onerror: ', e)
}