TJ-JSTOOLS【浏览器操作 —— openFull】
功能： 开启浏览器全屏状态。
注意： 只有用户的主动行为才可以触发（任何鼠标事件任何键盘事件等等）,这是为了用户体验和用户的浏览安全。
警告详情
js
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
1
意思大概是：在'Element'上执行'requestFullscreen'失败:API只能通过用户手势启动。
1-函数引入
js
import { openFull } from 'tj-jstools'
1
2-函数声明
ts
declare const openFull: (el?: Element, options?: FullscreenOptions) => Promise<void>;
1
3-使用示例
3.1- 简单使用
html
<button onclick="openFull()">openFullScreen</button>
1
以上是开启全屏示例，用户通过点击按钮触发该功能。不能自动加载！
html
<script>
openFull()
</script>
1
2
3
2
3
如意思代码，表示自动打开全屏功能，但是浏览器并不会触发该功能，而是以下发出警告！
WARNING
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
3.2- 指定元素全屏
html
<div
id="fullId"
style="margin-top: 40px; width: 100%;height: 100px;background-color: red;"
>
测试元素
</div>
<button onclick="openFullOfEl()">openFullScreenOfEl</button>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
指定元素开启全屏，需要将该元素作为参数传入openFull方法中，如以下代码：
ts
function openFullOfEl() {
const el:Element = document.getElementById('fullId');
openFull(el)
}
1
2
3
4
2
3
4
3.3- 开启配置
ts
function openFullOfEl() {
const el:Element = document.getElementById('fullId');
openFull(el,{navigationUI:'show'})
}
1
2
3
4
2
3
4
配置参数类型是一个JSON对象类型，目前只有navigationUI这一个选项。
4-OPTIONS配置详解
- navigationUI 该配置的默认值：
auto, 可选值有auto、hide、show三个选项。
详情参照MDN地址：navigationUI