# fullscreen

**Repository Path**: miikio/fullscreen

## Basic Information

- **Project Name**: fullscreen
- **Description**: 简易轻量化类原生的高兼容窗口全屏控件。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/miikio/fullscreen
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2022-03-05
- **Last Updated**: 2024-06-14

## Categories & Tags

**Categories**: webui

**Tags**: None

## README

# fullscreen (全屏控件)

## 项目主页
https://gitee.com/miikio/fullscreen

## 项目简介
- 版本： 1.1.0
- 更新时间： 2024.4.10
- 兼容性： Chrome, Firefox, Opera, Safari, Edge, IE 9+
- 定位：HTML5 API 扩展工具类
- 介绍：简易轻量化类原生的高兼容窗口全屏控件。

## 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名称 | -- |

## 使用示例
```js
// 引入控件实例，路径为具体引入包的位置
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)
}
```